抖音视频下载困难？三分钟教你如何轻松获取无水印内容
2026/4/25 16:39:24
本文系统总结了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 */实际应用建议
避免过度使用ID选择器- 优先级过高，不利于样式覆盖
合理使用类选择器- 复用性高，优先级适中
慎用!important- 除非必要，否则避免使用
利用CSS层叠- 合理组织选择器，减少特异性冲突
使用BEM等命名方法- 提高CSS可维护性
这个总结表涵盖了CSS选择器的主要类型和用法，可以帮助您在实际开发中快速查找和选择合适的CSS选择器。