CSS选择器汇总
CSS选择器是一种用于选择HTML元素的方式，它可以根据元素的属性、关系、状态等进行选择和样式设置。CSS选择器非常重要，因为它允许我们根据需要对特定的元素或元素组进行样式设置。
一、初级选择器
通配选择器指能够匹配HTML文档中所有元素的选择器。通配选择器使用一个星号（*）表示。语法：
* {属性：属性值；}示例代码：
* { padding: 0; margin: 0; }class 类选择器通过给HTML元素添加class属性并在CSS中使用类选择器来选择这些元素。类选择器使用"."符号来表示。语法：
.class名 {属性：属性值；}示例代码：
<div class="example">老大</div> <div class="example">老二</div> <div class="example">老三</div> // css 样式 .example { text-align: center; background-color: yellow; width: 100px; margin-bottom: 10px; }
id 选择器ID选择器以"#"字符开始，后面跟着ID的名称。语法：
#id名{属性：属性值；}示例代码：
<div id="selector">id选择器</div> // css 样式 #selector{ color: red; font-size: 30px; }
标签（元素）选择器标签选择器就是通过HTML元素的标签名称来选择元素。语法：
标签名{属性：属性值；}示例代码：
<p>元素選擇器</p> // css 样式 p { font-size: 24px; color: green; }
二、结构选择器
后代（包含）选择器用于选择指定元素的后代元素。语法：
祖先元素 后代元素 {属性：属性值；}示例代码：
<div> <div> <p>后代（包含）选择器</p> </div> <p>后代（包含）选择器</p> </div> // css 样式 div p { color: red; }
通用兄弟选择器选择在目标元素后面的所有兄弟元素语法：
目标元素 ~ 兄弟元素 {属性：属性值；}示例代码：
<p>11111</p> <span>22222</span> <div>33333</div> <span>44444</span> <p>555555</p> <span>6666666</span> // css 样式 p ~ span { color: red; }
子代选择器选择目标元素的直接子元素语法：
父元素 > 子元素 {属性：属性值；}示例代码：
<div> <p>11111</p> <div> <p>222222</p> </div> </div> // css 样式 div > p { color: blue; }
相邻兄弟选择器选择紧接在目标元素后面的兄弟元素语法：
目标元素 + 兄弟元素 {属性：属性值；}示例代码：
<p>1111</p> <span>22222</span> <span>33333</span> // css 样式 p + span { color: red; }
并集（群组）选择器用于选择多个群组中的所有元素。它使用逗号（,）将不同的选择器组合在一起。语法：
选择器1，选择器2{属性：属性值；}示例代码：
<div class="red">1111</div> <div class="blue">2222</div> // css 样式 .red, .blue { color: red; }
交集选择器用来选择同时满足多个选择器的元素。它使用逗号（,）将多个选择器组合在一起，只选择同时满足所有选择器的元素。语法：
选择器1选择器2{属性：属性值；}示例代码：
<div class="red" id="box">Hello, World!</div> // css 样式 .red#box { color: red; }
三、属性选择器
属性的或运算只要选择器元素中有当前属性就会被选中。语法：
选择器[属性名]{属性：属性值；}示例代码：
<h2 class="title" name>标题1</h2> <h2>标题2</h2> // css 样式 .title[name] { color: red; }
属性的与运算选择同时包含属性1和属性2的元素。语法：
选择器[属性1][属性2]{属性：属性值；}示例代码：
<h2 class="title" name>标题1</h2> <h2 name>标题2</h2> // css 样式 h2[name][class] { color: red; }
属性值的筛选CSS属性值的筛选是指通过特定条件来选择元素语法：
选择器[属性名='值']{属性：属性值；}示例代码：
<div class="label" name>标题1</div> <div class="label1" name>标题2</div> // css样式 div[class='label'] { color: red; }
前缀筛选^选择属性值以当前要求开头的元素。语法：
选择器[属性名^='要求']{属性：属性值；}示例代码：
<div class="label" name>标题1</div> <div class="label1" name>标题2</div> /* css样式 */ div[class^="lab"]{ color: red; }
后缀筛选$选择属性值以当前要求结尾的元素。语法：
选择器[属性名$='要求']{属性：属性值；}示例代码：
<div class="label" name>标题1</div> <div class="label1" name>标题2</div> /* css样式 */ div[class$="el1"]{ color: red; }
包含限定*选择属性值包含当前要求的元素。语法：
选择器[属性名*='要求']{属性：属性值；}示例代码：
<div class="label" name>标题1</div> <div class="label1" name>标题2</div> /* css样式 */ div[class*="lab"]{ color: red; }
包含限定~选择属性值包含一个给定要求词（单独存在）的元素。语法：
选择器[属性名~='要求']{属性：属性值；}示例代码：
<div class="label" name>1111</div> <div class="labeled label" name>2222</div> <div class="labelname" name>3333</div> /* css样式 */ div[class~="label"]{ color: red; }
包含限定|选择属性值只有给定要求或者是以给定要求开头后面用“-”拼接其他字符串的元素。语法：
选择器[属性名|='要求']{属性：属性值；}示例代码：
<div class="label" name>1111</div>
<div class="label-name" name>2222</div>
<div class="name-label" name>3333</div>
<div class="name.label" name>4444</div>
/* css样式 */
div[class|="label"]{
color: red;
}
四、伪类选择器:
:hover- 当鼠标悬停在元素上时应用样式。例如：
a:hover {
color: red;
}
:active- 当元素被激活时（例如点击按钮时），应用样式。例如：
button:active {
background-color: #ccc;
}
:focus- 当元素获得焦点时应用样式，例如在输入框中输入内容时。例如：
input:focus {
border: 2px solid blue;
}
:visited- 当链接已被访问过时应用样式。例如：
a:visited {
color: purple;
}
:first-child- 选择作为其父元素中的第一个子元素的元素。例如：
li:first-child {
font-weight: bold;
}
:last-child- 选择作为其父元素中的最后一个子元素的元素。例如：
li:last-child {
color: red;
}
:nth-child(n)- 选择作为其父元素中的第n个子元素的元素。例如：
p:nth-child(2) {
color: blue;
}
:nth-last-child(n)- 选择作为其父元素中的倒数第n个子元素的元素。例如：
p:nth-last-child(2) {
color: green;
}
:nth-of-type(n)- 选择作为其父元素中的特定类型的第n个子元素的元素。例如：
p:nth-of-type(3) {
font-style: italic;
}
:nth-last-of-type(n)- 选择作为其父元素中的特定类型的倒数第n个子元素的元素。例如：
p:nth-last-of-type(4) {
text-decoration: underline;
}
五、伪元素选择器::
::before：选择元素的前面插入的内容。
示例：给段落的前面插入一个装饰性的图标。
p::before {
content: "\2713";
color: red;
}
::after：选择元素的后面插入的内容。
示例：给链接的后面插入一个指向外部链接的图标。
a::after {
content: "\2192";
color: blue;
}
::first-letter：选择元素的第一个字母。
示例：给标题的第一个字母设置特殊样式。
h1::first-letter {
font-size: 2em;
color: red;
}
::first-line：选择元素的第一行。
示例：给段落的第一行设置特殊样式。
p::first-line {
font-weight: bold;
color: blue;
}
::selection：选择用户选中的文本。
示例：给被选中的文本设置特殊样式。
::selection {
background-color: yellow;
color: black;
}
这些是常见的伪元素选择器的示例，通过使用伪元素选择器，可以更加灵活地控制元素的样式，增强页面的交互性和美观性。伪元素选择器是CSS中的一种特殊选择器，用来选择元素的特定部分，而不是元素本身。
六、选择器权重
选择器权重是用来确定样式优先级的值，用于决定应用哪个样式规则。以下是常见的选择器及其权重：
| 选择器 | 权重 |
|---|---|
| !important | 无穷大 |
| 内联样式（style=“…”） | 1000 |
| ID选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 元素选择器、伪元素选择器 | 1 |
| 通配符选择器、子选择器、相邻选择器 | 0 |
当多个选择器应用于同一个元素时，权重较高的选择器将覆盖权重较低的选择器。但如果选择器具有相同的权重，后面的样式规则将覆盖前面的样式规则。
七、关于使用css选择器的一些建议
使用ID选择器来选择唯一的元素：ID选择器是最具体和最高优先级的选择器，它可以选中具有唯一ID属性的元素。使用ID选择器时，确保每个页面只有一个具有唯一ID的元素。使用类选择器来选择一组相关的元素：类选择器可以用于选择一组具有相同类名的元素。使用类选择器时，选择具有相同样式和功能的元素。这样可以提高代码重用性和可维护性。使用后代选择器和子选择器来选择嵌套的子元素：后代选择器（空格）和子选择器（>）可以选择嵌套在其他元素内部的元素。使用这些选择器时，确保不会选择到其他不需要样式的元素。避免使用标签选择器：标签选择器会选择所有具有指定标签的元素，这样会增加CSS选择器的复杂性和性能开销。应尽量避免使用标签选择器，而选择更具体的选择器。使用属性选择器来选择具有特定属性的元素：属性选择器可以选择具有特定属性的元素。使用属性选择器时，可以根据元素的属性值来选择元素，比如选择所有具有特定属性值的链接。使用伪类选择器来选择元素的特定状态：伪类选择器可以选择元素的特定状态，比如悬停状态、访问状态等。使用伪类选择器时，可以为不同状态的元素应用不同的样式。使用组合选择器来选择多个元素：组合选择器可以选择多个元素，比如选择具有特定类和特定属性的元素。使用组合选择器时，可以根据多个条件来选择元素。避免使用通配选择器：通配选择器（*）会选择所有元素，这样会增加CSS选择器的复杂性和性能开销。应尽量避免使用通配选择器，而选择更具体的选择器。使用媒体查询来选择不同屏幕大小的元素：媒体查询可以根据不同的屏幕大小选择元素。使用媒体查询时，可以为不同屏幕大小的设备提供不同的样式和布局。使用选择器的层级结构来提高选择器的效率：选择器的层级结构可以影响选择器的性能。应尽量将选择器的层级结构保持较浅，这样可以减少选择器的复杂性和提高选择器的效率。
总之，选择合适的CSS选择器可以帮助我们编写更具灵活性和可维护性的样式表。
