共计 5343 个字符，预计需要花费 14 分钟才能阅读完成。
文章目录
- 前言
- 一、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 元素的名称来选择元素。例如，
-
类选择器（
.开头）: 选择所有具有指定类的元素。 -
ID 选择器（
#开头）: 选择具有指定 ID 的元素。
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; }
3. 属性选择器
-
等于属性选择器(
[attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。 -
包含属性选择器(
[attribute~="value"]): 选择属性值包含指定完整子串的元素。 -
起始属性选择器(
[attribute^="value"]): 选择属性值以指定子串开头的元素。 -
结尾属性选择器(
[attribute$="value"]): 选择属性值以指定子串结尾的元素。 -
子串属性选择器(
[attribute*="value"]): 选择属性值包含指定子串的元素。
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. 伪元素选择器
6. 其他选择器
-
通配符选择器（
*）: 选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。 -
根伪类选择器（
:root）: 选择文档的根元素（通常是元素），并经常用于设置全局变量（CSS 自定义属性）。 -
语言伪类选择器（
:lang）：用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。
二、CSS 所有选择器的具体使用示例
1. 基础选择器
-
元素选择器: 选择 HTML 文档中所有指定类型的元素。
p { color: red; }p>这是一个段落。p>这个例子会选择所有的
元素，并将它们的文字颜色设置为红色。
-
类选择器: 选择具有指定类名的所有元素。
.highlight { background-color: yellow; }p class="highlight">这是一个段落。p>这个例子会选择所有
class="highlight"的元素，并将它们的背景颜色设置为黄色。 -
ID 选择器: 选择具有指定 ID 的元素。（注意：每个 ID 在文档中应该是唯一的）
#idname { color: green; }p id="idname">这是一个段落。p>这个例子会选择
id="idname"的元素，并将它的文字颜色设置为绿色。
2. 组合选择器
-
后代选择器: 选择某元素后代的所有指定元素。
div p { color: blue; }div> p>这是一个段落。p> div> -
子元素选择器: 选择某元素子代的所有指定元素。
div > p { color: red; }div> p>这是一个段落。p> div> -
相邻兄弟选择器: 选择紧接在某元素后的所有指定元素。选择紧接在另一元素后的元素，且二者有相同的父元素。
h1 + p { margin-top: 50px; }h1>标题h1> p>这是一个段落。p>这个例子会选择紧跟在
元素后的
元素，并设置其上外边距为 50 像素。
-
通用兄弟选择器: 选择某个元素之后的所有兄弟元素（共享相同的父元素），而不限于直接相邻的兄弟。
h1 ~ p { color: orange; }这个例子会选择所有在
元素之后的
兄弟元素，并将它们的文字颜色设置为橙色。
3. 属性选择器
-
等于属性选择器: 选择具有指定属性值的元素
a[target="_blank"] { color: red; }a href="https://www.example.com" target="_blank">链接a> -
包含属性选择器: 选择属性值包含指定子串的元素。选择某个元素内部的后代元素（包括子元素、孙子元素等）。
div p { color: green; }这个例子会选择所有
元素内部的起始属性选择器: 选择属性值以指定子串开头的元素
a[href^="https"] { color: black; }a href="https://www.example.com">链接a>结尾属性选择器: 选择属性值以指定子串结尾的元素
a[href$=".pdf"] { color: blue; }a href="document.pdf">PDF 文档a>子串属性选择器: 选择属性值包含指定子串的元素。选择作为某元素直接子元素的所有元素。
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; }p>这是一个段落。p>
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属性的元素。这个选择器在处理多语言网站时非常有用，因为它允许你根据元素的语言属性来应用不同的样式。p lang="en">This is a paragraph in English.p> p lang="fr">Ceci est un paragraphe en français.p>: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）和开发开放网络应用等。
原文地址: CSS 所有选择器的用法及示例（完整版）
