掌握这30个CSS3选择器，提升前端开发效率

"总结30个CSS3选择器" 在网页设计和开发中，CSS3选择器扮演着至关重要的角色，它们允许我们精确地控制页面元素的样式和布局。以下是30个CSS3选择器的详细解释，这些选择器极大地增强了CSS的灵活性和表现力。 1. 通用选择器 `*`： 通用选择器匹配任何元素，常用于初始化或清除所有元素的样式。例如，`* {margin: 0; padding: 0;}`可以清除默认的边距和填充。 2. ID选择器 `#id`： 使用ID选择器，可以定位具有特定ID的唯一元素，如`#container`。ID在整个文档中应该是唯一的，因此不宜频繁使用。 3. 类选择器 `.class`： 类选择器允许你为一个或多个元素应用相同的样式，只需将类名添加到CSS规则中。例如，`.error`可应用于所有带有“error”类的元素。 4. 后代选择器 `selector1 selector2`： 后代选择器（空格分隔）用于选择位于另一元素内的任何级别的子元素。例如，`li a`会选择所有在`li`元素内的`a`元素。 5. 标签选择器 `tagname`： 直接使用元素名称作为选择器，如`a`或`ul`，可以应用于页面上所有相应类型的元素。 6. 伪类选择器： - `:link`：应用于未被访问的链接。 - `:visited`：应用于已被访问过的链接。 - `:hover`：当鼠标悬停在元素上时应用。 - `:active`：元素在被点击并保持活动状态时应用。 7. 相邻兄弟选择器 `selector1 + selector2`： 选择紧跟在`selector1`后面的第一个`selector2`元素。例如，`div + p`会选择紧跟在`div`元素后面的`p`元素。 8. 兄弟选择器 `selector1 ~ selector2`： 选择所有紧跟在`selector1`后面的`selector2`元素，但不仅限于第一个。这与相邻兄弟选择器不同，它不局限于紧邻的元素。 9. 子代选择器 `selector1 > selector2`： 选择`selector1`的直接子元素`selector2`。例如，`ul > li`会选择所有`ul`下的直接`li`子元素。 10. 属性选择器 `[attr]`、`[attr=value]`、`[attr~=value]`、`[attr|=value]`、`[attr^=value]`、`[attr$=value]`、`[attr*=value]`： - `[attr]`：选择具有指定属性的元素。 - `[attr=value]`：选择属性值等于指定值的元素。 - `[attr~=value]`：选择属性值包含空格分隔的单词中包含指定值的元素。 - `[attr|=value]`：选择属性值是以指定值开头，后跟破折号（-）的元素。 - `[attr^=value]`：选择属性值以指定值开头的元素。 - `[attr$=value]`：选择属性值以指定值结尾的元素。 - `[attr*=value]`：选择属性值中包含指定值的元素。 11. 伪元素选择器 `::before` 和 `::after`： 在元素内容之前或之后插入内容，通常与`content`属性一起使用。 12. `:not(selector)`： 选择不符合指定选择器的元素。 13. `:nth-child(an+b)`、`:nth-last-child(an+b)`、`:nth-of-type(an+b)`、`:nth-last-of-type(an+b)`： 根据元素在父元素中的位置选择元素，如`:nth-child(2n+1)`会选择所有奇数位置的子元素。 14. `:first-child`、`:last-child`、`:first-of-type`、`:last-of-type`： 选择父元素的第一个或最后一个子元素，或同类型元素的第一个或最后一个。 15. `:only-child`、`:only-of-type`： 选择没有其他兄弟元素或同类型兄弟元素的元素。 16. `:empty`： 选择没有子元素（包括文本节点）的元素。 17. `:target`： 选择当前活动的URL锚点（如`#section1`）所对应的元素。 18. `:checked`： 选择被选中的表单元素，如`input[type="checkbox"]:checked`。 19. `:enabled`、`:disabled`： 选择表单元素启用或禁用的状态。 20. `:focus`： 选择当前获得焦点的元素。 21. `:valid`、`:invalid`： 验证表单元素的值是否符合规定，如`input:required:invalid`表示输入为空且要求必填。 22. `:in-range`、`:out-of-range`： 用于限制表单输入的值范围，如`input[type="number"]:in-range`。 23. `:required`、`:optional`： 根据表单元素是否需要填写来选择元素。 24. `:lang(language)`： 选择具有特定语言的元素，如`p.lang-fr`会选择语言为法语的段落。 25. `:not()`： 选择器内部可以是其他选择器，用来选择不匹配指定条件的元素。 26. `::selection`： 选择用户当前选取的文本。 27. `::before` 和 `::after`： 用于在元素内容前或后插入内容，常用于创建伪元素。 28. `:any-link`： 选择链接元素，无论其`href`属性是否为空。 29. `:local-link`： 选择相对URL链接的元素。 30. `:default`： 选择表单中默认选中的元素，如默认按钮。 了解和熟练使用这些CSS3选择器，可以帮助开发者更高效地编写样式，提高代码的可读性和可维护性，同时减少不必要的复杂性。在实际项目中，结合使用这些选择器可以实现精细的页面布局和交互效果。