CSS选择器分类总结（AI版）

本文系统总结了CSS选择器的分类和使用方法。
表格形式呈现了基础选择器（元素、类、ID、通用）、组合选择器（后代、子、兄弟等）、伪类选择器（状态/位置）、伪元素选择器以及属性选择器的具体用法和优先级。
重点说明了CSS选择器的优先级计算规则（从!important到通用选择器），并提供了计算示例。
最后给出实用建议：避免过度使用ID选择器、合理使用类选择器、慎用!important、利用CSS层叠特性等，帮助开发者有效选择合适的选择器并提高代码可维护性。

CSS选择器分类总结

下面通过表格分类总结CSS选择器，帮助您系统地理解和掌握各种选择器的用法：

基础选择器

选择器	示例	描述	优先级
元素选择器	`p { color: red; }`	选择所有指定HTML元素	1
类选择器	`.intro { color: red; }`	选择所有class="intro"的元素	10
ID选择器	`#header { color: red; }`	选择id="header"的元素	100
通用选择器	`* { margin: 0; }`	选择所有元素	0
属性选择器	`[target] { color: red; }`	选择带有target属性的所有元素	10

组合选择器

选择器	示例	描述
后代选择器	`div p { color: red; }`	选择div元素内的所有p元素
子选择器	`div > p { color: red; }`	选择div元素的所有直接子元素p
相邻兄弟选择器	`h1 + p { color: red; }`	选择紧接在h1元素后的p元素
通用兄弟选择器	`h1 ~ p { color: red; }`	选择h1元素之后的所有同级p元素
分组选择器	`h1, h2, p { color: red; }`	选择多个元素，应用相同样式

伪类选择器（状态/位置）

选择器	示例	描述
链接状态	`a:link { color: blue; }`	选择所有未访问的链接
访问状态	`a:visited { color: purple; }`	选择所有已访问的链接
悬停状态	`a:hover { color: red; }`	选择鼠标悬停的元素
激活状态	`a:active { color: green; }`	选择被点击时的元素
焦点状态	`input:focus { border: 2px solid blue; }`	选择获得焦点的元素
第一个子元素	`p:first-child { color: blue; }`	选择作为其父元素第一个子元素的p元素
最后一个子元素	`p:last-child { color: blue; }`	选择作为其父元素最后一个子元素的p元素
第n个子元素	`p:nth-child(2) { color: blue; }`	选择作为其父元素第2个子元素的p元素
第n个同类元素	`p:nth-of-type(2) { color: blue; }`	选择其父元素下第2个p元素
仅有一个子元素	`p:only-child { color: blue; }`	选择作为其父元素唯一子元素的p元素
空元素	`p:empty { display: none; }`	选择没有子元素的p元素
否定伪类	`p:not(.intro) { color: blue; }`	选择class不是intro的p元素

伪元素选择器

选择器	示例	描述
首字母	`p::first-letter { font-size: 2em; }`	选择p元素的第一个字母
首行	`p::first-line { color: red; }`	选择p元素的第一行
之前内容	`p::before { content: "★ "; }`	在p元素前插入内容
之后内容	`p::after { content: " ★"; }`	在p元素后插入内容
选中部分	`::selection { background: yellow; }`	选择用户选中的内容

属性选择器（详细）

选择器	示例	描述
存在属性	`[target]`	选择带有target属性的元素
精确匹配	`[target="_blank"]`	选择target="_blank"的元素
包含单词	`[title~="flower"]`	选择title属性包含单词"flower"的元素
开头匹配	`[lang\|="en"]`	选择lang属性值以"en"开头的元素
开头字符	`[href^="https"]`	选择href属性值以"https"开头的元素
结尾字符	`[src$=".pdf"]`	选择src属性值以".pdf"结尾的元素
包含字符	`[href*="example"]`	选择href属性值包含"example"的元素

CSS选择器优先级规则

优先级计算规则（从高到低）：

!important声明- 最高优先级
内联样式- style属性 (权重1000)
ID选择器- #id (权重100)
类/属性/伪类选择器- .class, [type], :hover (权重10)
元素/伪元素选择器- p, div, ::before (权重1)
通用选择器/组合器- *, >, +, ~ (权重0)

优先级计算示例：

#nav .item a:hover { color: red; } /* 权重：100+10+1+10=121 */ .header a.active { color: blue; } /* 权重：10+1+10=21 */ div p { color: green; } /* 权重：1+1=2 */