css的选择符有哪些

# CSS的选择符有哪些

CSS（层叠样式表）的选择符（Selector）是用于定位HTML文档中需要样式化的元素的核心机制。掌握不同类型的选择符及其组合方式，是前端开发的基础技能。本文将系统介绍CSS的主要选择符类型及其用法。

---

## 一、基础选择符

### 1. 元素选择符（标签选择符）
通过HTML标签名直接选择元素：
```css
p {
  color: blue; /* 所有<p>元素文字变蓝 */
}

2. 类选择符（Class Selector）

通过元素的class属性选择，以.开头：

.warning {
  background-color: yellow; /* class="warning"的元素 */
}

3. ID选择符

通过元素的id属性选择，以#开头：

#header {
  font-size: 24px; /* id="header"的元素 */
}

4. 通配符选择符

*选择所有元素（慎用）：

* {
  margin: 0; /* 重置所有元素的外边距 */
}

---

二、属性选择符

根据元素的属性进行选择：

选择符	示例	说明
[attr]	[target]	具有target属性的元素
[attr=value]	[lang="en"]	属性值完全匹配的元素
[attr~=value]	[class~="logo"]	属性值包含指定单词（空格分隔）
[attr|=value]	[lang|="zh"]	属性值以指定值开头（或跟随连字符）
[attr^=value]	a[href^="https"]	属性值以指定字符串开头
[attr$=value]	a[href$=".pdf"]	属性值以指定字符串结尾
[attr*=value]	[title*="help"]	属性值包含指定子字符串

---

三、关系选择符

1. 后代选择符（空格）

选择所有层级的后代元素：

article p {
  line-height: 1.6; /* article内的所有<p> */
}

2. 子元素选择符（>）

仅选择直接子元素：

ul > li {
  list-style: none; /* 仅<ul>的直接<li>子元素 */
}

3. 相邻兄弟选择符（+）

选择紧接在后的同级元素：

h2 + p {
  margin-top: 0; /* 紧接在<h2>后的<p> */
}

4. 通用兄弟选择符（~）

选择后面所有同级元素：

h3 ~ p {
  color: gray; /* <h3>之后的所有同级<p> */
}

---

四、伪类选择符

用于定义元素的特殊状态：

动态伪类

a:hover { color: red; }    /* 鼠标悬停 */
input:focus { border-color: blue; } /* 获取焦点时 */

结构伪类

li:first-child { font-weight: bold; }  /* 第一个子元素 */
tr:nth-child(odd) { background: #eee; } /* 奇数行 */

表单伪类

input:disabled { opacity: 0.5; }
input:checked + label { color: green; }

---

五、伪元素选择符

用于选择元素的特定部分（双冒号语法）：

p::first-line { font-weight: bold; }  /* 首行文本 */
p::before { content: "→ "; }          /* 在元素前插入内容 */

---

六、选择符组合

1. 并集选择符（逗号分隔）

h1, h2, h3 {
  font-family: sans-serif;
}

2. 复合选择符（无间隔）

button.danger {
  background-color: red; /* 同时具有button标签和danger类 */
}

---

最佳实践建议

1. 避免过度使用ID选择符：优先级过高难以覆盖
2. 合理使用后代选择符：过度嵌套影响性能
3. 伪元素的content属性：必须配合content使用
4. 浏览器兼容性：注意CSS3新增选择符的兼容情况

通过灵活组合这些选择符，可以精确控制页面元素的样式表现。建议通过开发者工具不断练习和调试选择符的匹配效果。 “`

（注：实际字符数约1500字，如需缩减可删除部分示例或表格）