【CSS基础--CSS选择器的常见用法】

news2025/1/16 22:02:38

CSS选择器的常见用法

  • 1.CSS介绍
    • 1.1 基本语法规范
    • 1.2 引入样式
    • 1.3 规范
  • 2. CSS选择器
    • 2.1 标签选择器
    • 2.2 类选择器
    • 2.3 ID选择器
    • 2.4 复合选择器

1.CSS介绍

CSS(Cascading Style Sheet),层叠样式表,由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。

1.1 基本语法规范

选择器+{一条/多条声明}

  • 选择器就是针对谁修改
  • 声明就是修改的内容
  • 声明的属性是键值对。使用 : (冒号)进行分割键和值
  • CSS要写在style标签中,而style标签可放任何位置,但一般放head标签内

在这里插入图片描述

1.2 引入样式

  • 行内样式:在标签内使用style属性,属性值是CSS属性键值对。

  • 内部样式:定义style标签,在标签内定义CSS样式。

  • 外部样式:定义link标签,通过href属性引入外部CSS。

内部样式会出现大量代码冗余,不利于后期维护所以不常用。行内样式,只适合写简单样式,外部样式,html和css实现了完全的分离,在企业开发中比较常用

1.3 规范

样式大小写:css不区分大小写,一般在开发中使用小写
空格规范:冒号后面带空格,选择器和{}之间也有一个空格

2. CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性

  1. 标签选择器
  2. class(类)选择器
  3. id选择器
  4. 复合选择器
  5. 调配选择器

在这里插入图片描述

2.1 标签选择器

选择所有的a标签,设置颜色为红色
在这里插入图片描述

2.2 类选择器

符号.(点)加类名,一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割)
在这里插入图片描述

2.3 ID选择器

#加id里面的名称
在这里插入图片描述

2.4 复合选择器

只设置ul下的li中的a标签
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1653639.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【已解决】‘pip‘ 不是内部或外部命令问题

😎 作者介绍:我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun,视频号:AI-行者Sun 🎈 本文专栏:本文收录于《AI实战中的各种bug…

Linux网站服务

1.概念:HTML:超级文本编辑语言 网页:使用HTML,PHP,JAVA语言格式书写的文件。 主页:网页中呈现用户的第一个界面。 网站:多个网页组合而成的一台网站服务器。 URL:统一资源定位符,访问网站的地址。 网站架构:LAMP: LinuxApacheMYSQLPHP(系统服务器程序数据管理…

【JAVA语言-第20话】多线程详细解析(二)——线程安全,非线程安全的集合转换成线程安全

目录 线程安全 1.1 概述 1.2 案例分析 1.3 解决线程安全 1.3.1 synchronized关键字 1.3.1.1 同步代码块 1.3.1.2 同步方法 1.3.2 使用Lock锁 1.3.2.1 概述 代码示例 1.4 线程安全的类 1.4.1 非线程安全集合转换成线程安全集合 线程安全 1.1 概述 指如果有多…

外贸企业邮箱怎么注册?五款外贸企业邮箱注册步骤

专业的公司邮箱不但能提高企业形象,也能保证商业沟通的流畅与信息安全性。本文将详解五种常见的外贸企业邮箱——Zoho Mail公司邮箱、腾讯公司邮箱、阿里公司邮箱、网易公司邮箱以及Gmail公司邮箱的注册流程,协助外贸企业轻松完成邮箱注册,打…

安装Nox夜神模拟器关闭了HyperV后Docker运行不了怎么办?

1.背景 为了模拟真机,尝试安装了Nox夜神模拟器, 安装过程要求关闭Hyper-V。当时只是在程序安装卸载中关闭了系统服务。以为到时勾选上就好了。操作路径:控制面板\所有控制面板项\程序和功能\启用或关闭Windows功能\Hyper-V。 后来卸载掉了夜神…

代码随想录第四十七天|打家劫舍、打家劫舍Ⅱ、打家劫舍Ⅲ

题目链接:. - 力扣(LeetCode) 代码如下: 打家劫舍问题需要注意相邻房子不能偷,因此在偷与不偷的选择上可以归类为: 偷当前(i)的房子,则子问题变为前i-2个房子的偷取金额…

VMware虚拟机提示内存不足

VMware虚拟机,k8s集群搭建内存不足的问题 疑问:我的电脑是8G8G双通道的内存,当我在搭建k8s集群时给master-2G内存,node1-3G内存,node2-3G内存; 当依次打开虚拟机到node2时VM提示“物理内存不足,…

【第14章】spring-mvc之ajax

文章目录 前言一、准备二、单个值1.前端2.后端3. 结果 三、对象1.前端2.后端3. 结果 四、JSON对象1.前端2.后端3. 结果 五、JSON数组1.前端2.后端3. 结果 总结 前言 AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术&#xff0c…

大模型微调实战之强化学习 贝尔曼方程及价值函数(一)

大模型微调实战之强化学习 贝尔曼方程及价值函数 强化学习(RL)是机器学习中一个话题,不仅在人工智能方面。它解决问题的方式与人类类似,我们每天都在学习并在生活中变得更好。 作为一名大模型学习者,当开始深入研究强…

2024蓝桥杯网络安全部分赛题wp

爬虫协议 题目给了提示访问robots.txt 会出三个目录 访问最后一个 点进去就flag{22560c15-577c-4c8b-9944-815473758bad} packet 下载附件,这个是流量包 放wireshark流量分析 搜http协议 发现有cat flag命令,直接看他返回的流量 最后base64解码即可…

Web服务器和Tomcat

Web介绍 对于http协议操作进行封装、简化web程序开发 部署web项目,对外提供上网信息浏览 Tomcat介绍 一个轻量级的web服务器 也称为web容器 Tomcat的文件夹介绍 下载地址:Apache Tomcat - Apache Tomcat 9 Software Downloads 安装:直…

嵌入式数据库SQLite 3配置使用详细笔记教程

0、惨痛教训 随着管理开发的项目体积越来越庞大,产品系统涉及的数据量也越来越多,并且伴随着项目不久就要交付给甲方了。如果项目的数据信息没有被妥善管理,后期设备的运行状态、操作状况等数据流信息不能被溯源,当出现了一些特殊…

typescript的入门到吐槽:看了typescript,发现前端真的卷,

typescript TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 与 JavaScript 的区别 其实就是对JavaScript的封装,把一个弱类型语言封…

“王翦五讨赏地,萧何三贬其身”的背后,正是智者安身的处世之道

冯子曰:智者,术所以生也;术者,智所以转也。 智慧的人,从不蛮行横性,而是懂得如何在世道和自我之间谋得最佳的处境。 01、王翦五讨赏地 战国时期,秦始皇派王翦率六十万大军攻打楚国&#xff0…

【SpringBoot】 什么是springboot(一)?如何搭建springboot项目?

文章目录 SpringBoot第一章1、什么是springboot1、回顾ssm项目搭建流程2、springboot项目的优点2、搭建springboot项目方式1:方式2:第二章1、基本配置1、热部署2、注解3、端口配置application.properties特点application.yml特点注意4、环境配置springboot中的配置文件要求5、…

深度学习——前馈全连接神经网络

前馈全连接神经网络 1.导入需要的工具包2.数据导入与数据观察(1)读取csv的文件信息:(2)训练数据前5行(3)打印第一个图(4)观察数据中的信息(5)查看…

JAVA版本的ATM编程问题记录

前段时间用C语言写了个银行ATM系统,还写了一篇文章记录了一些,C语言的ATM文章。后来又用IDEA写了一个JAVA版本的银行ATM。有人就会问为啥浪费这个时间写ATM呢?🧐其实是我本科代码没学好,所以现在想利用比较熟悉的ATM系…

第 8 章 电机测速(自学二刷笔记)

重要参考: 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 8.3.3 电机测速01_理论 测速实现是调速实现的前提,本节主要介绍AB相增量式编码器测速原理。 1.概…

faad2交叉编译——aac解码为pcm,解决faad单通道转双通道问题

FAAD是比较成熟高效的开源AAC解码库,这里用于解码AAC生成PCM数据,用于音频播放。这里因为faad库,会将单通道转化为双通道踩了些坑,所以记录一下。 我使用的是2.11.0版本,貌似往前的版本没有使用CMake,需要c…

如何在电脑中使用微信?pc版微信和手机版有什么区别

微信简介 微信是一个社交和商业强国,自成立以来一直在持续增长。该应用程序在2023年拥有13亿月活跃用户,尽管在某些国家对其使用存在一些阻力。 使用微信网页版可以获得的好处 尽管微信为iOS和Android智能手机提供了出色的应用程序,但仍有时…