1. CSS选择器类型
基础选择器
/* 通配选择器 */
* { color: black; }
/* 元素选择器 */
div { color: blue; }
/* 类选择器 */
.class { color: green; }
/* ID选择器 */
#id { color: red; }
/* 属性选择器 */
[type="text"] { color: purple; }
[href] { color: orange; }
组合选择器
/* 后代选择器 */
div p { color: blue; }
/* 直接子代选择器 */
div > p { color: red; }
/* 相邻兄弟选择器 */
h1 + p { color: green; }
/* 通用兄弟选择器 */
h1 ~ p { color: purple; }
伪类选择器
/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
/* 表单状态 */
input:focus { border-color: blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }
/* 结构伪类 */
li:first-child { color: red; }
li:last-child { color: blue; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-of-type(2) { font-weight: bold; }
/* 否定伪类 */
:not(.exclude) { color: black; }
伪元素选择器
/* 伪元素 */
p::before { content: "→ "; }
p::after { content: " ←"; }
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }
p::selection { background: yellow; }
2. 选择器优先级（特异性）计算规则
优先级权重系统
使用 (a, b, c, d) 四位数表示：
- a：行内样式（style属性） - 1或0
- b：ID选择器的数量
- c：类、属性、伪类选择器的数量
- d：元素、伪元素选择器的数量
计算示例
/* 权重：0,0,0,1 */
div {}
/* 权重：0,0,1,0 */
.container {}
/* 权重：0,0,1,1 */
div.container {}
/* 权重：0,1,0,0 */
#main {}
/* 权重：0,1,1,3 */
#main div.content p::first-line {}
/* 权重：1,0,0,0 (行内样式) */
<div style="color: red;">
优先级比较规则
// 比较顺序：a > b > c > d
(1,0,0,0) > (0,1,0,0) > (0,0,1,0) > (0,0,0,1)
// 具体比较示例：
(0,1,0,0) // #id - 优先级最高
(0,0,2,1) // .class1.class2 div - 次之
(0,0,1,3) // .class div p span - 再次
(0,0,0,2) // div p - 最低
3. 优先级层级（从高到低）
1. !important 声明
/* 最高优先级（慎用） */
div { color: red !important; }
2. 行内样式
<div style="color: blue;">...</div>
3. ID 选择器
#header { color: green; }
4. 类、属性、伪类选择器
.class { color: blue; }
[type="text"] { color: purple; }
:hover { color: red; }
5. 元素、伪元素选择器
div { color: black; }
::before { content: ""; }
6. 通配符、关系选择器
* { margin: 0; } /* 最低优先级 */
div > p { color: blue; } /* 关系符不增加权重 */
4. 特殊情况与注意事项
相同优先级处理
/* 后面的样式覆盖前面的 */
p { color: red; }
p { color: blue; } /* 这个生效 */
!important 的注意事项
/* 避免滥用 !important */
/* 不推荐的写法 */
div { color: red !important; }
div { color: blue !important; } /* 引发优先级战争 */
/* 特殊情况使用 */
.override { color: black !important; } /* 第三方样式覆盖 */
伪类与伪元素的区别
/* 伪类：权重计入 c */
a:hover { color: red; } /* 权重：0,0,1,1 */
/* 伪元素：权重计入 d */
p::before { content: ""; } /* 权重：0,0,0,2 */
:not() 伪类的特殊性
/* :not() 本身不增加权重 */
:not(p) { color: blue; } /* 权重：0,0,0,0 */
:not(.class) { color: red; } /* 权重：0,0,1,0 */
div:not(.class) { color: green; } /* 权重：0,0,1,1 */
5. 优先级实战技巧
避免过度具体化
/* 不好的写法 */
#header #nav ul li a { color: blue; } /* 权重：0,2,0,3 */
/* 好的写法 */
.nav-link { color: blue; } /* 权重：0,0,1,0 */
CSS 架构建议
/* 基础样式 - 低权重 */
.btn { padding: 8px 16px; }
/* 主题样式 - 中等权重 */
.btn-primary { background: blue; }
/* 状态样式 - 稍高权重 */
.btn-primary:hover { background: darkblue; }
/* 工具类 - 使用 !important */
.text-center { text-align: center !important; }
调试优先级问题
/* 查看应用了哪个样式 */
div {
color: red;
color: blue; /* 这个生效 */
}
/* 使用浏览器开发者工具检查 */
/* Elements面板 → Styles标签页 */
/* 被覆盖的样式有删除线 */
6. 选择器性能考虑
从高效到低效
/* 高效 - 直接选择 */
#id {}
.class {}
/* 中效 - 后代选择 */
.container .item {}
/* 低效 - 复杂选择 */
div ul li a span {}
最佳实践
/* 尽量使用类选择器 */
.button {} /* 推荐 */
div > ul > li > a {} /* 不推荐 */
/* 避免深层次嵌套 */
.nav-item {} /* 推荐 */
nav ul li a span {} /* 不推荐 */
理解选择器优先级是编写可维护 CSS 的关键。合理使用选择器，避免过度依赖高优先级选择器，可以使代码更清晰、更易于维护。
