CSS3全解析：31种选择器实战指南

"这篇教程详细介绍了CSS3中的31种选择器用法，包括但不限于星号选择器、ID选择器、类选择器、后代选择器、标签选择器、伪类选择器等，旨在帮助读者全面掌握CSS3选择器的运用。" 在CSS3中，选择器是用于指定网页元素样式的工具，它们对于精准地控制页面布局和视觉效果至关重要。以下是对这些选择器的详细解释： 1. **星号选择器(*)**：选择页面中的所有元素，常用于快速重置元素的内边距和外边距，但应谨慎使用，以免增加浏览器渲染负担。例如：`* {margin: 0; padding: 0;}`。 2. **ID选择器(#)**：通过元素的唯一ID来选择元素，如`#container`，ID在页面中应唯一，不能重复。示例：`#container {width: 960px; margin: auto;}`。 3. **类选择器(.)**：使用类名选择元素，可以应用于多个元素，如`.error`。示例：`.error {color: red;}`。 4. **后代选择器(XY)**：选取X元素内部的所有Y元素，如`li a`。示例：`li a {text-decoration: none;}`。 5. **标签选择器**：根据HTML标签类型选择元素，如`a`或`ul`。示例：`a {color: red;}` 和 `ul {margin-left: 0;}`。 6. **伪类选择器**： - `:link`：选择未被访问的链接。 - `:visited`：选择已被访问的链接。例如：`a:link {color: red;}` 和 `a:visited {color: purple;}`。 7. **相邻兄弟选择器(X+Y)**：选择紧跟在X元素后的第一个Y元素，如`ul + p`。示例：`ul + p {color: red;}`。 8. **通用兄弟选择器(X~Y)**：选择所有紧跟在X元素后的Y元素，但不包括第一个。不包含示例，因为原文未提及。 9. **子代选择器(X > Y)**：选择X元素的直接子元素Y，如`div > p`。不包含示例，因为原文未提及。 10. **属性选择器**：通过元素的属性匹配选择，如`[href]`选择所有具有`href`属性的元素。 11. **伪元素选择器**： - `::before`：在元素内容之前插入内容。 - `::after`：在元素内容之后插入内容。 12. **`:nth-child(n)`**：选择父元素的第n个子元素。 13. **`:nth-of-type(n)`**：选择父元素的第n个特定类型的子元素。 14. **`:not(X)`**：选择不符合选择器X的元素。 15. **`:target`**：选择当前活动的锚点元素（URL中#后的部分）。 16. **`:enabled`** 和 `:disabled`：分别选择启用和禁用的表单元素。 17. **`:checked`**：选择被选中的表单元素，如复选框或单选按钮。 18. **`:focus`**：选择获得焦点的元素。 19. **`:hover`**、`:active` 和 `:focus-within`：分别用于鼠标悬停、元素被激活和元素或其子元素获得焦点的状态。 20. **`:lang(C)`**：选择具有指定语言的元素。 以上只是部分选择器的解释，还有更多选择器，如`:indeterminate`、`:root`、`:is()`、`:where()`等，它们在复杂布局和交互设计中扮演着重要角色。学习并熟练运用这些选择器，能帮助开发者编写出更高效、更具针对性的CSS代码。