CSS3 引入了许多新的伪类选择器，这些选择器允许开发者根据元素的状态或特征来应用样式。以下是 CSS3 新增的一些重要伪类选择器的详细介绍：
目录
1. :nth-child()
2. :nth-of-type()
3. :first-child
4. :last-child
5. :first-of-type
6. :last-of-type
7. :not(selector)
8. :enabled 和 :disabled
9. :checked
10. :active、:focus 和 :hover
11. :lang(language)
12. 行内块元素的选择
1. :nth-child()
- 描述：选择父元素下的第 n 个子元素，可使用数字、关键字和公式。
- 语法：
:nth-child(n)，n可以是数字、关键字even、odd，或公式an + b。 - 示例：
/* 选择每个第三个子元素 */ li:nth-child(3) { background-color: yellow; } /* 选择偶数子元素 */ li:nth-child(even) { background-color: lightblue; } /* 选择奇数子元素 */ li:nth-child(odd) { background-color: lightgreen; } /* 选择从第 2 个开始每隔 3 个元素 */ li:nth-child(3n + 2) { background-color: coral; }
2. :nth-of-type()
- 描述：选择同类型的元素下的第 n 个元素。
- 语法：
:nth-of-type(n)。 - 示例：
/* 选择每个第二个 <p> 元素 */ p:nth-of-type(2) { color: red; } /* 选择每个第三个 <h2> 元素 */ h2:nth-of-type(3) { color: blue; }
3. :first-child
- 描述：选择父元素下的第一个子元素。
- 语法：
:first-child。 - 示例：
/* 选择每个列表的第一个子元素 */ ul li:first-child { font-weight: bold; }
4. :last-child
- 描述：选择父元素下的最后一个子元素。
- 语法：
:last-child。 - 示例：
/* 选择每个列表的最后一个子元素 */ ul li:last-child { color: green; }
5. :first-of-type
- 描述：选择父元素下某类型元素的第一个子元素。
- 语法：
:first-of-type。 - 示例：
/* 选择每个列表中的第一个 <li> 元素 */ li:first-of-type { font-size: 20px; }
6. :last-of-type
- 描述：选择父元素下某类型元素的最后一个子元素。
- 语法：
:last-of-type。 - 示例：
/* 选择每个列表中的最后一个 <li> 元素 */ li:last-of-type { font-size: 20px; }
7. :not(selector)
- 描述：选择不匹配指定选择器的元素。
- 语法：
:not(selector)。 - 示例：
/* 选择所有 <p> 元素，但不包括带有 .special 类的元素 */ p:not(.special) { color: gray; }
8. :enabled 和 :disabled
- 描述：选择表单中可用或不可用的输入元素。
- 语法：
:enabled和:disabled。 - 示例：
/* 选择所有可用的输入框 */ input:enabled { background-color: white; } /* 选择所有禁用的输入框 */ input:disabled { background-color: lightgray; }
9. :checked
- 描述：选择所有被选中的
<input>元素，如复选框或单选框。 - 语法：
:checked。 - 示例：
/* 选择所有被选中的复选框 */ input[type="checkbox"]:checked { outline: 2px solid blue; }
10. :active、:focus 和 :hover
- 描述：
:active：选择当前正在被激活的元素（例如被点击的链接）。:focus：选择当前获得焦点的元素（如输入框）。:hover：选择鼠标悬停的元素。
- 语法：
:active、:focus、:hover。 - 示例：
/* 鼠标悬停时改变颜色 */ a:hover { color: red; } /* 输入框获得焦点时 */ input:focus { border: 2px solid blue; } /* 链接被点击时 */ a:active { color: green; }
11. :lang(language)
- 描述：选择特定语言的元素。
- 语法：
:lang(language)。 - 示例：
/* 选择语言为中文的元素 */ :lang(zh) { font-family: 'Noto Sans CJK SC', sans-serif; }
12. 行内块元素的选择
- 描述：新的选择器可以针对行内块元素。
- 示例：
/* 选择所有行内块元素 */ span { display: inline-block; padding: 10px; }
这些新增的伪类选择器使得 CSS 更加灵活和强大，可以根据不同的条件和状态来应用样式，极大地提高了网页设计的便利性和表现力。通过适当使用这些选择器，开发者可以实现更复杂的样式效果，无需依赖 JavaScript。
