文章目录
前言一、CSS所有选择器的作用1. 基础选择器2. 组合选择器3. 属性选择器4. 伪类选择器5. 伪元素选择器6. 其他选择器
二、CSS所有选择器的具体使用示例1. 基础选择器2. 组合选择器3. 属性选择器4. 伪类选择器5. 伪元素选择器6. 其他选择器
总结PS：
前言
了解CSS（层叠样式表）所有选择器的用法，并列出基础示例。
一、CSS所有选择器的作用
1. 基础选择器
元素选择器（标签选择器）: 选择所有指定元素。
描述：根据HTML元素的名称来选择元素。例如，p选择器会选择所有的
元素。示例：p { color: red; } 会将所有
元素的文字颜色设置为红色。p {
color: red;
}
类选择器（.开头）: 选择所有具有指定类的元素。
描述：通过类名找到对应的元素。例如，通过HTML元素的class属性来选择元素，类选择器以点号.开头，后跟类名。类名以.开头，如.my-class。示例：.classselect { background: red; } 会选择所有class="classselect"的元素，并将它们的背景色设置为红色。.classselect {
background: red;
}
```
ID选择器（#开头）: 选择具有指定ID的元素。
描述：通过ID名找到对应的元素，ID选择器以井号#开头，后跟ID名，且每个ID在页面中应该是唯一的，如#my-id。示例：#idselect { height: 100px; } 会选择id="idselect"的元素，并将其高度设置为100像素。#idselect {
height: 100px;
}
```
2. 组合选择器
后代选择器（空格分隔）: 选择指定元素内部的所有符合条件的后代元素。
描述：通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。示例：div p会选择所有
元素。div p {
color: blue;
}
子元素选择器（>分隔）: 选择指定元素的直接子元素。
描述：使用>符号分隔选择器，通过>符号选择直接子元素。示例： div > p会选择所有直接位于
元素。div > p {
color: red;
}
相邻兄弟选择器（+分隔）: 选择与指定元素在同一层级且紧接在它后面的元素。
描述：使用+符号分隔选择器，选择紧接在另一元素后的元素，且二者有相同的父元素。示例：h2 + p会选择紧跟在
元素之后的
元素。h2 + p {
color: green;
}
通用兄弟选择器（~分隔）: 选择与指定元素在同一层级的所有后续兄弟元素。
描述：使用~符号分隔选择器，选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。示例：h2 ~ p会选择所有与h2元素在同一层级的p元素。h2 ~ p {
color: black;
}
群组选择器（，分隔）：允许您同时选择多个元素，并将相同的样式应用于它们。
描述：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号,分隔不同的选择器。示例：h1, h2, p { color: blue; } 会将
、和
元素的文字颜色都设置为蓝色。 h1, h2, p {
color: blue;
}
3. 属性选择器
等于属性选择器([attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。
描述：根据元素的属性及属性值来选择元素。示例：这个选择器会选择所有标签，其target属性值完全等于"_blank"。这意味着这些链接会在新标签页或新窗口中打开。a[target="_blank"] {
color: red;
}
包含属性选择器([attribute~="value"]): 选择属性值包含指定完整子串的元素。
描述：实际上[attribute~="value"]选择器用于选择属性值中包含一个完整单词value（单词之间由空格分隔）的元素。示例：这个选择器会选择所有标签，其title属性值中包含单词"example"（注意，"example"必须是一个完整的单词，前后有空格分隔，除非它是属性值中的唯一单词）。a[title~="example"] {
color: green;
}
起始属性选择器([attribute^="value"]): 选择属性值以指定子串开头的元素。
描述：选择属性值以指定子串开头的元素。示例：这个选择器会选择所有标签，其href属性值以"https"开头。这通常用于确保所有安全链接（HTTPS）都有特定的样式。a[href^="https"] {
color: black;
}
结尾属性选择器([attribute$="value"]): 选择属性值以指定子串结尾的元素。
描述：选择属性值以指定子串结尾的元素。示例：这个选择器会选择所有标签，其href属性值以".pdf"结尾。这可以用于给PDF文件链接添加特定的样式。a[href$=".pdf"] {
color: blue;
}
子串属性选择器([attribute*="value"]): 选择属性值包含指定子串的元素。
描述：选择属性值中包含指定子串的元素（与[attribute~="value"]不同，这里不需要完整的单词匹配）。示例：这个选择器会选择所有标签，其href属性值中包含子串"example"。这意味着无论"example"出现在href的哪个位置，只要它作为子串存在，该链接就会被选中。a[href*="example"] {
color: red;
}
4. 伪类选择器
动态伪类选择器：用于选择处于特定状态的元素。
:hover：当鼠标指针悬停在元素上时触发。:active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。:focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。:visited：选择已访问过的链接。:link：选择未访问过的链接。
结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如"even"和"odd"）或公式（如2n+1）。
:nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。
:only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。
:first-of-type：选择父元素下相同类型元素的第一个子元素。
:last-of-type：选择父元素下相同类型元素的最后一个子元素。
:nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。
:nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。
:only-of-type：选择父元素下与其类型相同的唯一子元素。
:empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。
表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
:checked：选择被选中的表单元素，如单选框、复选框等。:enabled：选择启用的表单元素。:disabled：选择被禁用的表单元素。:read-only：选择只读的表单元素。:read-write：选择可写的表单元素。 目标伪类选择器:
:target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。 否定伪类选择器:
:not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。 示例：
/* 动态伪类选择器 */
a:hover {
color: red;
}
/* 结构伪类选择器 */
ul li:first-child {
font-weight: bold;
}
/* 表单伪类选择器 */
input[type="checkbox"]:checked {
background-color: yellow;
}
/* 目标伪类选择器 */
:target {
border: 2px solid blue;
}
/* 否定伪类选择器 */
div:not(.special) {
color: gray;
}
5. 伪元素选择器
伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。
文本相关伪元素
::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊的样式。这常用于实现首字下沉或特殊首字母效果。::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式。这常用于强调段落或文本块的开头部分。 内容生成伪元素
::before：在元素的内容之前插入新的内容或装饰。这通常与content属性一起使用，以定义要插入的具体内容。::after：在元素的内容之后插入新的内容或装饰。同样，这也需要content属性来指定要插入的内容。 示例：p::before { content: "注意:"; color: red; } 会在每个
元素的内容前添加“注意:”字样，并设置其颜色为红色。p::first-line {
color: blue;
}
p::first-letter {
color: red;
}
p::before {
content: "Before: ";
color: green;
}
p::after {
content: " After";
color: black;
}
6. 其他选择器
通配符选择器（*）: 选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。
根伪类选择器（:root）:选择文档的根元素（通常是元素），并经常用于设置全局变量（CSS自定义属性）。
语言伪类选择器（:lang）：用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。
二、CSS所有选择器的具体使用示例
1. 基础选择器
元素选择器: 选择HTML文档中所有指定类型的元素。
p {
color: red;
}
这是一个段落。
这个例子会选择所有的
元素，并将它们的文字颜色设置为红色。
类选择器: 选择具有指定类名的所有元素。
.highlight {
background-color: yellow;
}
这是一个段落。
这个例子会选择所有class="highlight"的元素，并将它们的背景颜色设置为黄色。
ID选择器: 选择具有指定ID的元素。（注意：每个ID在文档中应该是唯一的）
#idname {
color: green;
}
这是一个段落。
这个例子会选择id="idname"的元素，并将它的文字颜色设置为绿色。
2. 组合选择器
后代选择器: 选择某元素后代的所有指定元素。
div p {
color: blue;
}
这是一个段落。
子元素选择器: 选择某元素子代的所有指定元素。
div > p {
color: red;
}
这是一个段落。
相邻兄弟选择器: 选择紧接在某元素后的所有指定元素。 选择紧接在另一元素后的元素，且二者有相同的父元素。
h1 + p {
margin-top: 50px;
}
标题
这是一个段落。
这个例子会选择紧跟在
元素后的
元素，并设置其上外边距为50像素。
通用兄弟选择器: 选择某个元素之后的所有兄弟元素（共享相同的父元素），而不限于直接相邻的兄弟。
h1 ~ p {
color: orange;
}
这个例子会选择所有在
元素之后的
兄弟元素，并将它们的文字颜色设置为橙色。
群组选择器: 允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号,分隔不同的选择器。 h1, h2, p {
color: blue;
}
这个例子会选择将
、和
元素的文字颜色都设置为蓝色。
3. 属性选择器
等于属性选择器: 选择具有指定属性值的元素
a[target="_blank"] {
color: red;
}
包含属性选择器: 选择属性值包含指定子串的元素。选择某个元素内部的后代元素（包括子元素、孙子元素等）。
div p {
color: green;
}
这个例子会选择所有
元素，并将它们的文字颜色设置为绿色。
起始属性选择器: 选择属性值以指定子串开头的元素
a[href^="https"] {
color: black;
}
结尾属性选择器: 选择属性值以指定子串结尾的元素
a[href$=".pdf"] {
color: blue;
}
子串属性选择器: 选择属性值包含指定子串的元素。选择作为某元素直接子元素的所有元素。
ul > li {
list-style-type: none;
}
这个例子会选择所有直接位于
- 元素下的
- -元素，并移除它们的列表样式。
4. 伪类选择器
动态伪类选择器：用于选择处于特定状态的元素。
结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。
表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
目标伪类选择器: 选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
否定伪类选择器: 选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。
示例：
/* 动态伪类选择器 */
a:hover {
color: red;
}
/* 结构伪类选择器 */
ul li:first-child {
font-weight: bold;
}
/* 表单伪类选择器 */
input[type="checkbox"]:checked {
background-color: yellow;
}
/* 目标伪类选择器 */
:target {
border: 2px solid blue;
}
/* 否定伪类选择器 */
div:not(.special) {
color: gray;
}
5. 伪元素选择器
伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。p::first-line {
color: blue;
}
p::first-letter {
color: red;
}
p::before {
content: "Before: ";
color: green;
}
p::after {
content: " After";
color: black;
}
这是一个段落。
6. 其他选择器
通配符选择器（*）：匹配页面上的所有元素。这种选择器在需要为页面上所有元素设置统一的样式时非常有用，特别是在重置样式或设置一些基本的样式规则时。
示例： * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
在这个例子中，通配符选择器被用来为页面上所有元素设置margin和padding为0，并将box-sizing属性设置为border-box，这是一种常见的样式重置方法，有助于减少浏览器之间的样式差异。
根伪类选择器（:root）：用于选择文档的根元素，通常是元素。它经常用于设置全局变量（CSS自定义属性），这些变量可以在整个文档中被重复使用，有助于保持样式的一致性并减少重复代码。
示例： :root {
--primary-color: #007bff;
--font-family: Arial, sans-serif;
}
body {
color: var(--primary-color);
font-family: var(--font-family);
}
在这个例子中，:root选择器被用来定义两个全局变量--primary-color和--font-family。然后，在body选择器中，这些变量被用作color和font-family属性的值，从而在整个文档中统一了字体颜色和字体族。
语言伪类选择器（:lang）：用于选择具有特定lang属性的元素。这个选择器在处理多语言网站时非常有用，因为它允许你根据元素的语言属性来应用不同的样式。
示例：
This is a paragraph in English.
Ceci est un paragraphe en français.
:lang(en) {
font-family: Arial, sans-serif;
}
:lang(fr) {
font-family: 'Times New Roman', serif;
}
在这个例子中，:lang(en)选择器被用来选择所有lang属性为en的元素，并为它们设置Arial字体。类似地，:lang(fr)选择器被用来选择所有lang属性为fr的元素，并为它们设置’Times New Roman’字体。这样，不同语言的文本就可以使用不同的字体样式，从而提高了网站的可读性和用户体验。
总结
CSS所有选择器大致分为6种类型： 1.基础选择器 2.组合选择器 3.属性选择器 4.伪类选择器 5.伪元素选择器 6.其他选择器
PS：
参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
MDN Web Docs（全称Mozilla Developer Network，谋智开发者网络），提供了关于Web技术、开放网络应用和Web标准的详细、权威、可靠的文档，可以深入学习Web技术以及能够驱动Web的软件，包括网络标准（例如CSS、HTML和JavaScript）和开发开放网络应用等。