css（层叠样式表）选择器是一种用于选择html元素的工具。css选择器允许您根据html元素的类型、属性、id或类来设置样式。选择器是css的基础，掌握它们是掌握css的重要一步。
本篇文章将介绍常用的CSS选择器及其用法。在开始之前，需要先了解一些基本知识：
- CSS选择器语法：选择器指向HTML元素，后面跟着一对大括号{}，花括号内是一组属性和值对，用分号隔开。
- HTML元素可以使用标签名、类名(id)和属性等作为选择器。
- 元素可以有多个类名，类名之间用空格分隔。
- ID 和 class 名称必须遵循命名规则，例如不能以数字开头，不能包含特殊字符等。
现在就让我们具体了解几种CSS选择器及其使用方法。
- 标签选择器
标签选择器是最简单的CSS选择器。它使用HTML元素的标签名称来设置样式。标签选择器应用于所有此标记的元素。
例如，要为所有的段落(p)设置红色文本颜色，可以使用以下代码：
p {
color: red;
}
- 类选择器
类选择器通过在标签中添加类名来选择元素。类名以“.”符号开头。
例如，以下代码会将所有使用“my-class”类名的元素的文本颜色设置为红色：
.my-class {
color: red;
}
在HTML中，class属性可以应用于任何元素。以下是一个例子：
<div>我是一个含有my-class类名的div元素</div>
- ID选择器
ID选择器通过在标签中添加ID名称来选择元素。ID名称以“#”符号开头。
例如，以下代码会将ID为“my-id”的元素的文本颜色设置为蓝色：
#my-id {
color: blue;
}
在HTML中，id属性只能应用于单个元素。以下是一个例子：
<div>我是一个含有my-id ID名称的div元素</div>
- 属性选择器
属性选择器基于HTML元素的属性来设置样式。它们允许使用方括号[]来访问元素的属性。
例如，以下代码会将所有具有“href”属性的元素的文本颜色设置为绿色：
a[href] {
color: green;
}
另外，您可以使用属性值来更精细地设置样式。例如，以下代码会将所有“href”属性值以“.pdf”结尾的链接的文本颜色设置为红色：
a[href$=".pdf"] {
color: red;
}
在上面的代码中，“$=”符号表示属性值以某个特定值结尾。
- 后代选择器
后代选择器通过选择父元素的子元素来设置样式。它使用空格分隔每个标签名称。
例如，以下代码会将所有div元素中的a元素设置为绿色：
div a {
color: green;
}
在上面的代码中，空格符将div元素和a元素相互连接。
- 交集选择器
交集选择器选择同时具有指定类名和标签名称的元素。它使用“.”和标签名称来定义。
例如，以下代码会将拥有“my-class”类名和“li”标记名称的所有元素文本颜色设置为蓝色：
li.my-class {
color: blue;
}
在上面的代码中，“li.my-class”选择器只应用于同时具有“li”和“my-class”类名的元素。
总结：
到这里，我们已经了解了6种常用的CSS选择器。理解选择器将有助于您更好地定位和开发HTML元素的样式。不同的选择器需要用到不同的HTML结构，因此我们需要根据实际需求选择合适的选择器。
CSS选择器是CSS中一个非常重要的知识点，对于前端开发人员而言，掌握它们是非常重要的一步。希望这篇文章能够帮助到您。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
