css选择器是CSS（层叠样式表）中用于匹配HTML文档内特定元素的规则，它的核心作用是告诉浏览器要把哪些样式应用到对应的页面元素上，是连接HTML结构和CSS样式的桥梁。
css选择器的常见类型
基础选择器
基础选择器是最常用的选择器类型，包含以下几种：
- 元素选择器：直接使用HTML标签名作为选择器，匹配页面中所有该标签的元素，比如
p会匹配所有<p>标签。 - 类选择器：以英文点号开头，后面跟类名，匹配所有class属性包含该类名的元素，比如
.text-red匹配所有class包含text-red的元素。 - ID选择器：以井号开头，后面跟ID名，匹配id属性等于该值的唯一元素，比如
#header匹配id为header的元素。 - 通配符选择器：使用星号
*，匹配页面中所有元素，一般用于重置默认样式。
组合选择器
组合选择器通过元素之间的关系来匹配目标元素：
- 后代选择器：使用空格分隔两个选择器，匹配第一个选择器匹配元素内部的所有后代元素，比如
div p匹配div内部的所有p元素。 - 子元素选择器：使用大于号
>分隔，只匹配第一个选择器匹配元素的直接子元素，比如ul>li只匹配ul的直接子li，不匹配嵌套在li里的其他ul中的li。 - 相邻兄弟选择器：使用加号
+分隔，匹配第一个选择器匹配元素后面紧邻的同层级元素，比如h2+p匹配h2后面紧邻的p元素。 - 通用兄弟选择器：使用波浪号
~分隔，匹配第一个选择器匹配元素后面所有同层级的元素，比如h2~p匹配h2后面所有的p元素。
属性选择器
属性选择器通过元素的属性来匹配，常见语法如下：
| 语法 | 匹配规则 |
|---|---|
[attr] | 匹配带有attr属性的所有元素 |
[attr=value] | 匹配attr属性值等于value的元素 |
[attr^=value] | 匹配attr属性值以value开头的元素 |
[attr$=value] | 匹配attr属性值以value结尾的元素 |
[attr*=value] | 匹配attr属性值包含value的元素 |
伪类与伪元素选择器
伪类选择器用于匹配元素的特定状态，比如:hover匹配鼠标悬停时的元素，:first-child匹配父元素的第一个子元素。伪元素选择器用于匹配元素的特定部分，比如::before在元素内容前插入内容，::after在元素内容后插入内容。
css选择器的使用示例
下面是一个简单的HTML结构和对应的CSS选择器使用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css选择器示例</title>
<style>
/* 元素选择器：所有p标签文字颜色为灰色 */
p {
color: #666;
}
/* 类选择器：class为highlight的元素背景为黄色 */
.highlight {
background-color: yellow;
}
/* ID选择器：id为main的元素内边距为20px */
#main {
padding: 20px;
}
/* 后代选择器：div内的所有span文字加粗 */
div span {
font-weight: bold;
}
/* 伪类选择器：鼠标悬停在按钮上时背景变蓝 */
button:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="main">
<p class="highlight">这是一段高亮的段落</p>
<p>这是普通段落</p>
<span>这是div内的span</span>
<button>悬停我</button>
</div>
</body>
</html>
css选择器的优先级规则
当多个选择器匹配到同一个元素，并且设置了同一样式属性时，会按照优先级决定最终生效的样式，优先级从高到低依次为：
- 内联样式：写在元素style属性里的样式，优先级最高
- ID选择器：每个ID选择器权重为100
- 类选择器、属性选择器、伪类选择器：每个权重为10
- 元素选择器、伪元素选择器：每个权重为1
- 通配符选择器、继承的样式：优先级最低
如果优先级相同，那么后面定义的样式会覆盖前面的样式。可以通过!important强制提升样式优先级，但不建议过度使用，避免样式维护困难。
css_selectorCSS前端开发样式匹配修改时间：2026-07-10 03:48:23