CSS选择器是前端样式开发的基础，通过不同的选择器规则可以精准匹配页面中的目标元素，从而为其应用对应的样式属性。合理选择和使用选择器，不仅能减少样式冲突，还能让CSS代码结构更清晰，便于后续维护。
常见CSS选择器类型
基础选择器
基础选择器是最常用的选择器类型，包含以下几种：
- 元素选择器：直接使用HTML元素名作为选择器，匹配所有对应元素，比如
p会匹配所有<p>标签。 - 类选择器：以
.开头，后面跟类名，匹配所有带有对应class属性的元素，比如.box匹配class为box的元素。 - ID选择器：以
#开头，后面跟ID名，匹配对应id属性的元素，页面中ID通常唯一。 - 通配符选择器：使用
*匹配页面所有元素，一般用于重置默认样式。
下面是基础选择器的使用示例：
/* 元素选择器：所有p标签文字颜色为灰色 */
p {
color: #666;
}
/* 类选择器：class为highlight的元素背景为黄色 */
.highlight {
background-color: yellow;
}
/* ID选择器：id为header的元素高度为60px */
#header {
height: 60px;
}
/* 通配符选择器：重置所有元素的外边距和内边距 */
* {
margin: 0;
padding: 0;
}组合选择器
组合选择器通过多个基础选择器的组合，实现更精准的元素匹配：
- 后代选择器：用空格分隔两个选择器，匹配前一个选择器元素内部的所有后一个选择器元素，比如
div p匹配div内部的所有p元素。 - 子元素选择器：用
>分隔，只匹配前一个元素的直接子元素，比如ul>li只匹配ul的直接子元素li。 - 相邻兄弟选择器：用
+分隔，匹配紧接在前一个元素后面的同层级元素，比如h2+p匹配h2后面紧邻的p元素。 - 通用兄弟选择器：用
~分隔，匹配前一个元素后面的所有同层级元素，比如h2~p匹配h2后面所有的p元素。
组合选择器示例：
/* 后代选择器：div内部所有span文字大小为14px */
div span {
font-size: 14px;
}
/* 子元素选择器：nav的直接子元素a有下划线 */
nav>a {
text-decoration: underline;
}
/* 相邻兄弟选择器：h3后面紧邻的p上边距为20px */
h3+p {
margin-top: 20px;
}伪类与伪元素选择器
伪类选择器用于匹配元素的特定状态，伪元素选择器用于选择元素的特定部分：
- 常见伪类：
:hover匹配鼠标悬停状态，:focus匹配元素获得焦点状态，:nth-child(n)匹配第n个子元素。 - 常见伪元素：
::before在元素内容前插入内容，::after在元素内容后插入内容，::first-line匹配元素的第一行文本。
使用示例：
/* 鼠标悬停时按钮背景变蓝 */
button:hover {
background-color: blue;
color: white;
}
/* 列表偶数项背景为浅灰 */
li:nth-child(even) {
background-color: #f5f5f5;
}
/* 在段落前添加星号 */
p::before {
content: "*";
color: red;
margin-right: 5px;
}属性选择器
属性选择器通过元素的属性或属性值来匹配元素，常见用法如下：
[attr]：匹配带有attr属性的所有元素。[attr=value]：匹配attr属性值等于value的元素。[attr^=value]：匹配attr属性值以value开头的元素。[attr$=value]：匹配attr属性值以value结尾的元素。[attr*=value]：匹配attr属性值包含value的元素。
属性选择器示例：
/* 匹配所有带有disabled属性的input元素 */
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* 匹配type为text的input元素 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
/* 匹配href以https开头的a元素 */
a[href^="https"] {
color: green;
}选择器优先级规则
当多个选择器匹配同一个元素并设置了相同样式属性时，会根据优先级决定最终生效的样式，优先级从高到低为：
- 内联样式：写在元素style属性中的样式，优先级最高。
- ID选择器：每个ID选择器计为100分。
- 类选择器、伪类选择器、属性选择器：每个计为10分。
- 元素选择器、伪元素选择器：每个计为1分。
- 通配符选择器、继承的样式：优先级最低。
优先级分数高的样式会覆盖分数低的，分数相同则后面的样式覆盖前面的。可以通过!important强制提升样式优先级，但尽量不要滥用。
优先级计算示例：
/* 优先级：1（元素）+10（类）=11 */
p.content {
color: red;
}
/* 优先级：100（ID）+1（元素）=101，高于上面的规则 */
#main p {
color: blue;
}实际场景选择建议
在实际开发中，可以根据场景选择合适的选择器：
- 通用样式优先用元素选择器或类选择器，避免用ID选择器，因为ID选择器优先级高，后续难以覆盖。
- 需要匹配元素状态时用伪类选择器，比如交互状态、子元素位置等。
- 匹配特定属性特征的元素时用属性选择器，比如表单元素、链接等。
- 尽量减少选择器的层级，层级越深优先级计算越复杂，也不利于维护。
合理运用CSS选择器，就能精准控制元素样式，减少不必要的样式冲突，让前端样式开发更高效。