CSS中选择器有哪些

# CSS中选择器有哪些

CSS选择器是样式表语言中最核心的组成部分之一，它决定了样式规则将应用于HTML文档中的哪些元素。本文将系统介绍CSS中各类选择器的语法、功能和使用场景。

## 一、基础选择器

### 1. 元素选择器（类型选择器）
```css
p {
  color: blue;
}

• 通过HTML标签名匹配元素
• 优先级权重：0,0,1

2. 类选择器（Class Selector）

.warning {
  background-color: yellow;
}

• 通过class属性匹配元素
• 可组合使用（如.btn.large）
• 优先级权重：0,1,0

3. ID选择器

#header {
  height: 80px;
}

• 通过id属性匹配唯一元素
• 优先级权重：1,0,0

4. 通配符选择器

* {
  margin: 0;
  padding: 0;
}

• 匹配所有元素
• 常用于全局样式重置
• 优先级权重：0,0,0

二、属性选择器

1. 基础属性选择器

[disabled] {
  opacity: 0.5;
}

• 匹配具有指定属性的元素

2. 精确值匹配

[type="submit"] {
  background: green;
}

3. 部分值匹配

[class^="icon-"]  /* 以...开头 */
[class$="-active"] /* 以...结尾 */
[class*="btn"]    /* 包含... */

三、组合选择器

1. 后代选择器

article p {
  line-height: 1.6;
}

2. 子元素选择器

ul > li {
  list-style: none;
}

3. 相邻兄弟选择器

h2 + p {
  margin-top: 0;
}

4. 通用兄弟选择器

h2 ~ p {
  color: #666;
}

四、伪类选择器

1. 动态伪类

a:hover { color: red; }
input:focus { outline: none; }

2. 结构伪类

li:first-child { font-weight: bold; }
tr:nth-child(odd) { background: #f5f5f5; }

3. 表单伪类

input:checked { background: blue; }
input:disabled { cursor: not-allowed; }

五、伪元素选择器

p::first-line { font-weight: bold; }
blockquote::before { content: "“"; }

六、选择器优先级

CSS优先级通过权重系统计算：

1. !important声明：1,0,0,0
2. 内联样式：1,0,0
3. ID选择器：1,0,0
4. 类/属性/伪类选择器：0,1,0
5. 元素/伪元素选择器：0,0,1

七、现代CSS新增选择器

1. :is() 和 :where()

:is(h1, h2, h3) { margin: 0; }
:where(.dark-theme) a { color: white; }

2. :has()

article:has(img) { border: 1px solid #ddd; }

3. 方向感知伪类

html:dir(rtl) { text-align: right; }

八、最佳实践建议

1. 避免过度嵌套：一般不超过3层
2. 慎用ID选择器：不利于样式复用
3. 合理使用!important：仅在必要时使用
4. 利用CSS变量：增强可维护性
5. 考虑浏览器兼容性：使用caniuse.com验证

九、选择器性能考量

虽然现代浏览器优化良好，但仍需注意： - 避免*选择器的过度使用 - 后代选择器比子选择器更耗性能 - 右侧选择器应尽可能具体（如.nav > li优于ul > li）

结语

掌握CSS选择器是前端开发的基础技能，合理运用各类选择器可以： - 精准定位目标元素 - 减少不必要的HTML结构 - 提高样式代码的可维护性 - 实现复杂的UI效果

随着CSS规范的持续演进，选择器功能仍在不断增强，建议开发者定期关注W3C标准更新。

提示：本文示例代码需要根据实际项目需求进行调整，部分高级选择器需注意浏览器兼容性问题。 “`

注：本文约1300字，采用Markdown格式编写，包含代码块、标题层级和重点标注。实际使用时可根据需要调整内容深度或补充具体示例。