CSS 选择器

CSS 选择器是 CSS 的核心概念之一，它决定了样式将应用到哪些 HTML 元素上。掌握选择器的使用是编写有效 CSS 的基础。

选择器的作用

选择器就像一个过滤器，告诉浏览器应该将样式应用到哪些元素上。没有选择器，CSS 就无法确定样式的应用对象。

p {
  color: blue;
}

在这个例子中，p 就是选择器，它告诉浏览器："找到所有的 <p> 元素，然后把它们的颜色设置为蓝色"。

选择器的分类

CSS 选择器可以分为以下几大类：

1. 基础选择器

• 元素选择器
• 类选择器
• ID 选择器
• 通配符选择器

2. 组合选择器

• 后代选择器
• 子元素选择器
• 相邻兄弟选择器
• 通用兄弟选择器

3. 属性选择器

• 存在属性选择器
• 属性值选择器
• 属性值部分匹配选择器

4. 伪类选择器

• 状态伪类
• 结构伪类
• 表单伪类

5. 伪元素选择器

• ::before
• ::after
• ::first-line
• ::first-letter

选择器的优先级

不同的选择器具有不同的优先级，当多个选择器作用于同一个元素时，浏览器会根据优先级规则决定应用哪个样式。

优先级计算规则

优先级用一个三元组表示：(ID 选择器数量, 类选择器数量, 元素选择器数量)

/* 优先级：(0,0,1) */
p {
  color: blue;
}

/* 优先级：(0,1,0) */
.text {
  color: green;
}

/* 优先级：(1,0,0) */
#header {
  color: red;
}

优先级比较

#header (1,0,0) > .text (0,1,0) > p (0,0,1)

!important 规则

!important 具有最高优先级，会覆盖其他所有样式：

.text {
  color: green !important;
}

但要注意，过度使用 !important 会让样式难以维护，应尽量避免使用。

选择器的性能

不同的选择器对浏览器性能的影响不同：

性能从高到低

1. ID 选择器 - 最快
2. 类选择器 - 很快
3. 元素选择器 - 快
4. 后代选择器 - 较慢
5. 通配符选择器 - 最慢

性能优化建议

/* 不推荐 - 过度嵌套 */
div ul li a span {
  color: blue;
}

/* 推荐 - 使用类选择器 */
.nav-link span {
  color: blue;
}

选择器的使用场景

元素选择器

适用于需要对某种类型的所有元素应用相同样式的情况：

h1 {
  font-size: 32px;
  margin-bottom: 20px;
}

p {
  line-height: 1.6;
  margin-bottom: 15px;
}

类选择器

适用于需要对一组特定元素应用相同样式的情况：

.button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

.highlight {
  background-color: #fff3cd;
  padding: 10px;
}

ID 选择器

适用于页面中唯一的元素：

#header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
}

后代选择器

适用于选择某个元素的所有后代元素：

/* 选择所有 div 内的段落 */
div p {
  margin-bottom: 15px;
}

/* 选择 nav 内的所有链接 */
nav a {
  color: white;
  text-decoration: none;
}

子元素选择器

适用于只选择直接子元素：

/* 只选择 ul 的直接子元素 li */
ul > li {
  margin-bottom: 10px;
}

/* 只选择 nav 的直接子元素 a */
nav > a {
  font-weight: bold;
}

选择器的组合使用

选择器可以组合使用，实现更精确的选择：

多选择器组合

/* 选中所有 h1、h2、h3 */
h1, h2, h3 {
  color: #333;
  margin-bottom: 15px;
}

/* 选中所有具有类名 button 和 primary 的元素 */
.button.primary {
  background: #007bff;
}

层级组合

/* 选中 div 内的类名为 text 的元素 */
div .text {
  color: #666;
}

/* 选中 ID 为 header 内的类名为 logo 的元素 */
#header .logo {
  font-size: 24px;
}

选择器的最佳实践

1. 优先使用类选择器

类选择器具有良好的可重用性和可维护性：

/* 推荐 */
.card {
  background: white;
  border: 1px solid #ddd;
  padding: 20px;
}

/* 不推荐 - 使用元素选择器限制性太强 */
div {
  background: white;
  border: 1px solid #ddd;
  padding: 20px;
}

2. 避免过度嵌套

过度嵌套会降低性能并增加维护难度：

/* 不推荐 */
body div.container div.content div.article div.title {
  font-size: 24px;
}

/* 推荐 */
.article-title {
  font-size: 24px;
}

3. 使用语义化的类名

使用有意义的类名可以提高代码可读性：

/* 推荐 */
.article-title {
  font-size: 24px;
}

/* 不推荐 */
.big-text {
  font-size: 24px;
}

4. 避免使用 !important

除非绝对必要，否则避免使用 !important：

/* 推荐 */
.button.primary {
  background: #007bff;
}

/* 不推荐 */
.button {
  background: #999 !important;
}

常见的选择器错误

1. 选择器拼写错误

/* 错误 - 类选择器需要加点 */
title {
  color: blue;
}

/* 正确 */
.title {
  color: blue;
}

2. ID 选择器重复使用

<!-- 错误 - ID 应该唯一 -->
<p id="text">第一段</p>
<p id="text">第二段</p>

<!-- 正确 - 使用类选择器 -->
<p class="text">第一段</p>
<p class="text">第二段</p>

3. 选择器优先级理解错误

/* 可能不符合预期 */
#header .nav {
  color: blue;
}

/* 优先级更高 */
.nav {
  color: red !important;
}

实际应用示例

网站导航样式

/* 导航容器 */
.main-nav {
  background: #333;
  padding: 0 20px;
}

/* 导航链接 */
.main-nav a {
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  display: inline-block;
}

/* 导航链接悬停效果 */
.main-nav a:hover {
  background: #555;
}

/* 当前页面链接 */
.main-nav a.active {
  background: #007bff;
}

文章样式

/* 文章容器 */
.article {
  background: white;
  padding: 30px;
  margin-bottom: 20px;
}

/* 文章标题 */
.article-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

/* 文章元信息 */
.article-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

/* 文章内容 */
.article-content {
  line-height: 1.8;
  color: #555;
}

/* 文章内容中的段落 */
.article-content p {
  margin-bottom: 15px;
}

总结

CSS 选择器是 CSS 的核心，掌握选择器的使用对于编写有效的 CSS 至关重要。记住以下几点：

1. 选择器决定了样式的应用对象
2. 不同的选择器具有不同的优先级
3. 优先使用类选择器
4. 避免过度嵌套选择器
5. 使用语义化的类名
6. 了解选择器的性能影响
7. 谨慎使用 !important