CSS 选择器

最后更新：2026-09-13

CSS 选择器

选择器用于选取要设置样式的 HTML 元素。CSS 提供从简单类型选择器到复杂组合器与伪类的多种机制，可精确控制任意元素。

基础选择器

CSS 选择器	说明
`*`	通用选择器，匹配文档中的每一个元素。
`element`	类型(标签)选择器，匹配指定标签名的所有元素，如 p。
`.class`	类选择器，匹配带有指定 class 属性的元素。
`#id`	ID 选择器，匹配具有指定 id 属性的唯一元素。

组合器

CSS 选择器	说明
`A B`	后代组合器：匹配 A 后代中的 B 元素。
`A > B`	子组合器：匹配 A 直接子元素中的 B。
`A + B`	相邻兄弟：匹配同一父级下紧接 A 之后的 B。
`A ~ B`	通用兄弟：匹配 A 之后的任意 B 兄弟元素。

属性选择器

CSS 选择器	说明
`[attr]`	匹配带有指定属性的元素。
`[attr=value]`	匹配属性值精确等于给定值的元素。
`[attr~=value]`	匹配属性为空格分隔列表且含该值的元素。
`[attr^=value]`	匹配属性值以给定字符串开头的元素。
`[attr$=value]`	匹配属性值以给定字符串结尾的元素。
`[attr*=value]`	匹配属性值包含给定子串的元素。

伪类

CSS 选择器	说明
`:hover`	匹配用户指针悬停其上的元素。
`:focus`	匹配获得键盘焦点的元素。
`:first-child`	匹配同级中的第一个子元素。
`:nth-child(n)`	匹配同级中的第 n 个子元素。
`:not(x)`	否定：匹配不满足选择器 x 的元素。
`:checked`	匹配处于选中状态的单选/复选/选项元素。

伪元素

CSS 选择器	说明
`::before`	在元素内容之前插入生成内容。
`::after`	在元素内容之后插入生成内容。
`::first-line`	匹配块级元素的首行文本。
`::first-letter`	匹配块级元素的首字母。
`::selection`	匹配用户高亮选中的文档部分。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。