CSS选择器用于精准控制网页元素样式，包括元素选择器、类选择器、ID选择器、属性选择器、后代与子选择器、伪类选择器及组合选择器，通过标签名、class、id、属性、结构关系和状态匹配元素，实现灵活的样式应用。
CSS选择器是控制网页样式的核心工具，它决定了哪些HTML元素会应用特定的CSS规则。理解并掌握选择器的使用方法，是学习CSS的基础。下面详细介绍常用CSS选择器及其用法。
1. 元素选择器（标签选择器）
元素选择器通过HTML标签名称来选中元素，是最基础的选择器类型。
例如：
立即学习“前端免费学习笔记（深入）”；
p {
color: blue;
}
div {
font-size: 16px;
}
上述代码会让所有 p 标签文字变为蓝色，所有 div 标签字体大小为16px。
2. 类选择器（class选择器）
类选择器以点号（.）开头，用于选中具有指定class属性的元素，可被多个元素复用。
例如：
HTML:
<p class="highlight">这是一段高亮文字</p>
<div class="highlight">这个div也会被样式影响</div>
CSS:
.highlight {
background-color: yellow;
font-weight: bold;
}
所有带有 class="highlight" 的元素都会拥有黄色背景和加粗字体。
3. ID选择器
ID选择器以井号（#）开头，用于选中具有特定id属性的唯一元素。一个页面中id应唯一。
例如：
HTML:
<div id="header">网站头部</div>
CSS:
#header {
height: 80px;
border-bottom: 1px solid #ccc;
}
该样式只作用于id为 header 的元素。
4. 属性选择器
属性选择器通过元素的属性或属性值来匹配元素，语法为[属性]或[属性=值]。
常见写法包括：
- [type] —— 有type属性的元素
- [type="text"] —— type属性等于text的元素
- [href*="example"] —— href包含example的链接
- [class^="btn"] —— class以btn开头的元素
示例：
input[type="password"] {
border: 2px solid red;
}
所有密码输入框都会显示红色边框。
5. 后代选择器与子选择器
用于选中嵌套结构中的特定元素。
-
后代选择器：用空格分隔，选中某元素内部的所有指定后代。
例如：div p 选中所有在div内的p元素。 -
子选择器：用 > 符号连接，仅选中直接子元素。
例如：ul > li 只选中ul的直接li子项，不包括嵌套li。
6. 伪类选择器
伪类用于定义元素的特殊状态，以冒号（:）开头。
常见伪类：
- :hover —— 鼠标悬停时
- :focus —— 元素获得焦点时（如输入框）
- :first-child —— 父元素的第一个子元素
- :nth-child(n) —— 第n个子元素，支持公式如2n+1
- :not(选择器) —— 排除符合选择器的元素
示例：
a:hover {
color: orange;
}
鼠标移到链接上时颜色变为橙色。
7. 组合选择器
多个选择器可以组合使用，提高精确度。
- .box.highlight —— 同时拥有box和highlight两个class的元素
- p#intro —— id为intro的p标签
- div + p —— 紧接在div后的第一个p元素（相邻兄弟选择器）
- div ~ p —— div之后的所有同级p元素（通用兄弟选择器）
基本上就这些。掌握这些基础选择器，就能精准控制页面中任意元素的样式。实际开发中常结合多种选择器使用，建议多练习嵌套与优先级的理解。不复杂但容易忽略细节。
