跳到主要内容

CSS元素选择器

CSS 选择器是 CSS 规则集（Rule Set）的第一部分。它们的作用是选中你想要样式化的 HTML 元素。没有选择器，CSS 就不知道该把样式应用到哪个元素上。

类型	符号/示例	作用
元素选择器 (Type)	`p`	选中所有指定标签的元素，例如 `p` 选中所有段落。
类选择器 (Class)	`.intro`	选中所有带有特定 class 的元素（最常用）。
ID 选择器 (ID)	`#header`	选中指定 id 的元素，id 必须唯一。
通用选择器 (Universal)	`*`	选中页面中的所有元素。

css
p { color: blue; }
.highlight { background: yellow; }
#main { padding: 10px; }
* { box-sizing: border-box; }

组合选择器

组合选择器允许更灵活的选择目标：

类型	示例	作用
后代选择器	`div p`	选中 div 内的所有 p（子级/孙级等）。
子元素选择器	`ul > li`	选中 ul 的直接子元素 li。
相邻兄弟选择器	`h1 + p`	选中紧跟在 h 1 后面的 p。
通用兄弟选择器	`h1 ~ p`	选中 h 1 后面所有兄弟 p。

css
#footer a { text-decoration: none; }
#menu > li { list-style: none; }

属性选择器

基于 HTML 属性来选元素：

语法	示例	作用
`[attr]`	`[title]`	选中带有 title 属性的元素。
`[attr=value]`	`[type="text"]`	精确匹配属性值。
`[attr^=val]`	`[href^="https"]`	属性值以 val 开头。
`[attr$=val]`	`[src$=".png"]`	属性值以 val 结尾。
`[attr*=val]`	`[alt*="logo"]`	属性值包含 val。

伪类选择器

伪类表示元素的特殊状态或结构位置：

分类	示例	说明
交互	`:hover`	鼠标悬停状态
	`:active`	激活（点击中）
	`:focus`	输入框聚焦
结构	`:first-child`	第一个子元素
	`:last-child`	最后一个子元素
	`:nth-child(2n)`	第 2 n 个子元素
	`:not(p)`	排除 p 元素

css
a:hover { color: red; }
input:focus { border-color: blue; }

伪元素选择器

伪元素用来操作元素内容的一部分：

伪元素	示例	作用
`::before`	`p::before`	在元素前插入内容
`::after`	`p::after`	在元素后插入内容
`::first-line`	`p::first-line`	第一行文字
`::first-letter`	`p::first-letter`	第一个字母

css
h2::before {
  content: "⚡ ";
  color: orange;
}

优先级计算规则

CSS 在遇到多个规则同时作用在同一个元素时，需要根据 优先级（Specificity） 来决定最终样式。 CSS 优先级是一个分层次的比较体系，可以理解为一个 四位数权重：

text

内联样式  |  ID  |  类/属性/伪类  |  元素/伪元素

比较时从左到右，谁大谁优先。

选择器类型	示例	权重值
内联样式	`<div style="color:red">`	1000
ID 选择器	`#header`	100
类选择器	`.intro`	10
属性选择器	`[type="text"]`	10
伪类选择器	`:hover`, `:first-child`	10
元素选择器	`div`, `p`, `h1`	1
伪元素选择器	`::before`, `::after`	1
通配选择器	`*`	0

示例比较

css
/* 元素选择器：权重 1 */
p { color: blue; }

/* 类选择器：权重 10 */
p.note { color: green; }

/* ID 选择器：权重 100 */
#article p { color: red; }

如果这三条规则都匹配同一个 <p>，最终颜色是红色，因为 ID 选择器权重最高。

重要性覆盖

!important 会让样式提升到最高优先级，但仍要受作用范围限制：
css
```
p { color: blue !important; }
.note { color: red; }
```
即使 .note 权重更高，最终还是蓝色，因为 !important 强制覆盖。
如果多个 !important 冲突，依然比较 选择器优先级。

特殊情况

内联样式（写在 HTML 元素上的 style=""）默认权重比普通选择器都高，但仍可被 !important 覆盖。
通配符 *、继承得到的样式优先级最低。

组合选择器
属性选择器
伪类选择器
伪元素选择器
优先级计算规则
示例比较
重要性覆盖
特殊情况