CSS3核心特性-第7章-7.1-基础选择器与组合选择器

学习目标

• 掌握CSS基础选择器（元素、类、ID选择器）的语法与使用场景
• 理解组合选择器（后代、子元素、相邻兄弟等）的匹配规则
• 能够通过选择器组合实现复杂元素定位
• 区分不同选择器的优先级与性能影响

概念讲解

CSS选择器是用于定位HTML元素并应用样式的模式。基础选择器通过元素类型、类名或ID直接匹配元素，组合选择器则通过元素间的关系（如父子、兄弟关系）进行匹配，两者结合可实现精准的样式定位。

选择器的核心价值在于：

• 分离结构与样式：HTML专注内容结构，CSS通过选择器控制样式
• 代码复用：一个选择器可匹配多个元素，避免样式重复定义
• 精准控制：通过组合规则定位特定场景的元素（如”表格中最后一行的偶数单元格”）

语法参考

一、基础选择器

> 注意：ID选择器具有唯一性，一个文档中不应出现重复ID；类选择器可重复使用，一个元素可同时拥有多个类（空格分隔）。

二、组合选择器

实战示例

示例1：基础选择器综合应用

<style>
    /* 元素选择器：匹配所有
<p>标签 */
    p {
      line-height: 1.6;
      color: #444;
    }

    /* 类选择器：匹配class="highlight"的元素 */
    .highlight {
      background: #fff3cd;
      border-left: 3px solid #ffc107;
      padding-left: 10px;
    }

    /* ID选择器：匹配id="intro"的元素 */
    #intro {
      font-size: 1.1em;
      margin-bottom: 20px;
    }

    /* 通配选择器：重置所有元素的默认内外边距 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>

  <p id="intro">这是一段介绍文本（ID选择器生效）。</p>

<p>这是普通段落文本（元素选择器生效）。</p>
  <p class="highlight">这是需要高亮的文本（类选择器生效）。</p>

示例2：组合选择器实战——导航菜单样式

<style>
    /* 后代选择器：匹配nav内的所有a标签 */
    nav a {
      text-decoration: none;
      color: #333;
      padding: 8px 12px;
      display: inline-block;
    }

    /* 子元素选择器：仅匹配nav的直接子ul */
    nav &gt; ul {
      list-style: none;
      display: flex;
      gap: 10px;
      background: #f5f5f5;
      padding: 10px 20px;
    }

    /* 相邻兄弟选择器：匹配.active后的第一个li */
    .active + li {
      border-left: 1px solid #ddd;
      padding-left: 15px;
    }

    /* 多选择器组合：同时匹配hover和focus状态 */
    nav a:hover, 
    nav a:focus {
      color: #165DFF;
      background: #e8f0fe;
      border-radius: 4px;
    }
  </style>

<nav>

<ul>

<li><a href="/" class="active">首页</a></li>

<li><a href="/">产品</a></li>

<li><a href="/">关于</a></li>

<li><a href="/">联系</a></li>
    </ul>
  </nav>

示例3：常见错误案例与修正

❌ 错误用法：过度使用通配选择器

/* 问题：通配选择器性能较差，会匹配所有元素 */
* {
  color: #666; /* 导致所有文本颜色被覆盖，包括按钮、标题等 */
}

/* ✅ 修正：使用继承+特定选择器 */
body {
  color: #666; /* 文本颜色通过继承生效 */
}
button {
  color: #fff; /* 按钮单独设置颜色 */
}

❌ 错误用法：ID选择器滥用

/* 问题：ID选择器优先级过高，难以覆盖，且不可复用 */
#btn-submit {
  background: #007bff;
}

/* ✅ 修正：优先使用类选择器 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
.btn-primary {
  background: #007bff;
  color: white;
}

注意事项

1. 选择器优先级规则

• 优先级权重：ID选择器（100） > 类选择器（10） > 元素选择器（1） > 通配选择器（0）
• 组合权重叠加：如.nav li（类+元素）权重为10+1=11，ul li（元素+元素）权重为1+1=2
• !important例外：!important会强制提升样式优先级，但应避免使用（破坏样式层级）

2. 性能优化建议

• 避免嵌套过深：如div ul li a span（层级越深性能越差），建议不超过3层
• 减少通配选择器：通配选择器会遍历所有DOM元素，大型页面可能导致性能问题
• 优先使用类选择器：类选择器性能优于ID选择器（浏览器对类的哈希表查找更快）
• 避免标签与类组合：如p.text（直接用.text更高效，除非需限制特定标签）

3. 浏览器兼容性

• 所有现代浏览器（Chrome 1+、Firefox 1+、Safari 1+）均支持基础选择器
• 组合选择器中，通用兄弟选择器（~）在IE8及以下不支持，需降级处理

自测题

1. 以下选择器中，优先级最高的是： A. div.container B. #header C. .nav > li D. body .main p 答案：B（ID选择器权重100，高于类选择器和元素选择器组合）
2. 如何匹配`
   `中所有class为`active`的直接子`
   • `元素？ *答案：`ul > li.active`*
3. 以下选择器的含义是：h2 + p:not(.intro) *答案：匹配紧接在`

   `后的、且class不是`intro`的`

4. 写出匹配”所有禁用状态的按钮（disabled属性）”的选择器： 答案：button[disabled]（属性选择器，将在7.2节详细讲解）

扩展阅读

• MDN选择器参考
• CSS选择器性能优化指南
• CSS Specificity Calculator（优先级计算工具）