选择器

---

CSS 选择器（CSS Selectors）用于选中 HTML 元素 并应用 样式。它们可以根据 标签、类、ID、属性、状态、层级关系 等方式选取元素。

下面是 CSS 选择器的完整分类，包括基本选择器、组合选择器、属性选择器、伪类、伪元素等，并提供实用示例！

---

1. 基本选择器（最常用）

选择器	语法	作用	示例
通配符 (*)	*	选中 所有元素	* { margin: 0; padding: 0; }
标签选择器	div	选中 所有 div	div { color: blue; }
类选择器	.className	选中 类名为 className 的元素	.btn { background: red; }
ID 选择器	#id	选中 ID 为 id 的元素	#id { font-size: 20px; }

🔹 示例：

* { margin: 0; }      /* 选中所有元素 */
p { color: red; }      /* 选中所有 <p> 元素 */
.btn { background: blue; }  /* 选中 class="btn" */
#id { width: 100%; }  /* 选中 id="main" */

---

2. 组合选择器（多个元素筛选）

选择器	语法	作用	示例
群组选择器 (，)	A, B	选中多个元素	h1, h2 { color: red; }
后代选择器（空格 ）	A B	选中 A 内的所有 B	div p { color: blue; }
子代选择器 (>)	A > B	选中 A 内的直接子元素 B	ul > li { font-weight: bold; }
相邻兄弟选择器 (+)	A + B	选中 A 紧接着的兄弟 B	h1 + p { color: green; }
通用兄弟选择器 (~)	A ~ B	选中 A 后所有兄弟 B	h1 ~ p { color: gray; }

🔹 示例：

h1, h2 { color: red; } /* 选中所有 h1 和 h2 */
div p { font-size: 16px; } /* 选中 div 里面的所有 <p> */
ul > li { font-weight: bold; } /* 选中 ul 直接子级 <li> */
h1 + p { font-style: italic; } /* 选中紧跟 h1 的 p */
h1 ~ p { color: gray; } /* 选中 h1 之后所有 p */

---

3. 属性选择器

选择器	语法	作用	示例
存在属性 ([attr])	[attr]	选中 包含该属性的元素	[disabled] { opacity: 0.5; }
属性值等于 ([attr="value"])	[attr="val"]	选中 属性值完全匹配的元素	[type="text"] { border: 1px solid black; }
属性值包含 ([attr*="value"])	[attr*="val"]	选中 属性值中包含 val 的元素	[class*="btn"] { background: blue; }
属性值开头 ([attr^="value"])	[attr^="val"]	选中 属性值以 val 开头的元素	[href^="https"] { color: green; }
属性值结尾 ([attr$="value"])	[attr$="val"]	选中 属性值以 val 结尾的元素	[src$=".jpg"] { border: 2px solid red; }

🔹 示例：

input[type="text"] { background: lightgray; } /* 选中所有 type="text" 的输入框 */
a[href^="https"] { color: green; } /* 选中 href 以 https 开头的链接 */
img[src$=".jpg"] { border: 2px solid red; } /* 选中 src 以 .jpg 结尾的图片 */

---

4. 伪类选择器（动态状态）

选择器	语法	作用	示例
:hover	A:hover	鼠标悬停	button:hover { background: blue; }
:focus	A:focus	选中输入框	input:focus { border: 2px solid green; }
:first-child	A:first-child	选中第一个子元素	li:first-child { font-weight: bold; }
:last-child	A:last-child	选中最后一个子元素	li:last-child { color: red; }
:nth-child(n)	A:nth-child(n)	选中第 n 个元素	li:nth-child(2) { color: blue; }

🔹 示例：

button:hover { background: yellow; } /* 鼠标悬停时变黄 */
input:focus { border: 2px solid blue; } /* 输入框聚焦时变蓝 */
li:first-child { font-weight: bold; } /* 列表第一个加粗 */
li:nth-child(2) { color: red; } /* 选中第二个列表项 */

---

5. 伪元素选择器（选中元素的一部分）

>[!tip] 备注： 一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

选择器	语法	作用	示例
::before	A::before	在元素前添加内容	p::before { content: "📌 "; }
::after	A::after	在元素后添加内容	p::after { content: " ✅"; }
::first-letter	A::first-letter	选中第一个字母	p::first-letter { font-size: 2em; }
::first-line	A::first-line	选中第一行文本	p::first-line { color: blue; }

🔹 示例：

p::before { content: "🔹 "; } /* 在每个 p 之前添加图标 */
p::after { content: " ✅"; } /* 在每个 p 之后添加 ✅ */
p::first-letter { font-size: 2em; color: red; } /* 首字母变大变红 */

---

🔥 CSS 选择器优先级

CSS 规则可能会冲突，优先级（从高到低）如下：

1. 行内样式 (style="...") → 1000
2. ID 选择器 (#id) → 100
3. 类 / 伪类 / 属性选择器 (.class, :hover, [attr]) → 10
4. 标签选择器 (div, p) → 1
5. 通配符 (*) → 0

🔹 示例（权重计算）：

#header { color: red; }       /* 权重 100 */
.navbar { color: blue; }      /* 权重 10 */
div { color: green; }         /* 权重 1 */

📌 #header 胜出（因为权重最高）

---

🎯 总结

• 基本选择器：*、div、.class、#id
• 组合选择器：A B、A > B、A + B、A ~ B
• 属性选择器：[attr]、[attr="val"]、[attr*="val"]
• 伪类：:hover、:focus、:nth-child(n)
• 伪元素：::before、::after、::first-letter