引言
CSS选择器是前端开发中至关重要的工具，它决定了我们如何精确地定位和样式化HTML元素。本文将系统介绍CSS的各种选择器类型，帮助您从基础到高级全面掌握选择器的使用技巧。
基本选择器
1. 元素选择器（标签选择器）
元素选择器是最简单的选择器类型，直接使用HTML标签名作为选择器。
p { color: red; }
优点：写法简单直观
缺点：当页面中存在多个相同标签时，无法精确区分特定元素
2. 类选择器
类选择器通过元素的class属性进行选择，以点号(.)开头。
.name { color: red; }
3. ID选择器
ID选择器通过元素的id属性进行选择，以井号(#)开头。
#name { color: red; }
4. 通配符选择器
通配符选择器(*)匹配页面中的所有元素，常用于重置默认样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
复合选择器
1. 交集选择器
将多个选择器紧密连接（无空格），同时满足所有条件的元素才会被选中。
p.beauty { color: red; }
2. 并集选择器
用逗号分隔多个选择器，匹配其中任意一个选择器的元素。
h1, h2, h3 {
font-family: 'Microsoft YaHei';
}
3. 兄弟选择器
+：选择紧邻的下一个兄弟元素~：选择后面所有的兄弟元素
h1 + p { color: blue; } /* 只选择h1后第一个p */
h1 ~ p { color: red; } /* 选择h1后所有p */
4. 属性选择器
根据元素的属性及属性值进行选择。
[class^="d"] { color: red; } /* class以"d"开头 */
[class$="h"] { color: blue; } /* class以"h"结尾 */
[class*="i"] { color: green; } /* class包含"i" */
[class~="num1"] { color: yellow; } /* class包含独立单词"num1" */
5. 后代选择器
>：直接子元素选择器- 空格：所有后代元素选择器
.div > p { color: red; } /* 只选择直接子元素p */
.div p { color: blue; } /* 选择所有后代p */
伪类和伪元素选择器
1. 伪元素选择器
使用双冒号(::)表示，用于创建不在DOM中的虚拟元素。
span.book::before { content: "《"; }
span.book::after { content: "》"; }
p::first-letter {
font-size: 2em;
color: red;
}
2. 伪类选择器
使用单冒号(:)表示，描述元素的特定状态。
动态伪类（常用链接状态）
a:link { color: blue; } /* 未访问 */
a:visited { color: purple; } /* 已访问 */
a:hover { color: red; } /* 鼠标悬停 */
a:active { color: green; } /* 激活状态 */
记忆口诀：LVHA（爱恨原则）
结构伪类（根据DOM位置选择）
li:first-child { color: red; }
li:nth-child(2n) { background: #f5f5f5; } /* 偶数行 */
tr:nth-child(odd) { background: #eee; } /* 奇数行 */
CSS选择器权重
当多个选择器作用于同一元素时，浏览器通过权重决定最终应用的样式。
权重计算规则
使用(a,b,c)格式计算：
- a：ID选择器的数量
- b：类、伪类、属性选择器的数量
- c：元素、伪元素选择器的数量
比较规则：从左到右逐级比较，数值大的优先级高
权重等级（从高到低）
!important声明- 行内样式（style属性）
- ID选择器
- 类/伪类/属性选择器
- 元素/伪元素选择器
- 通配符选择器
/* 权重示例 */
#header .nav li.active a { color: red; } /* (1,2,2) */
.main-nav > ul > li > a { color: blue; } /* (0,1,3) */
注意：当权重相同时，后定义的样式会覆盖前面的样式（"后来居上"原则）
最佳实践建议
- 尽量使用类选择器，减少ID选择器的使用
- 避免过度使用
!important，它会破坏样式层叠规则 - 保持选择器简洁，避免过长的后代选择链
- 合理使用CSS预处理器（如Sass/Less）的嵌套功能
- 对于复杂项目，考虑使用BEM等命名规范
