学习目标

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

概念讲解

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

选择器的核心价值在于：

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

语法参考

一、基础选择器

选择器类型 语法格式 描述 示例
元素选择器 element 匹配所有指定类型的元素 p { color: #333; }（匹配所有<p>标签）
类选择器 .classname 匹配所有包含指定类的元素 .btn { padding: 8px 16px; }（匹配class="btn"的元素）
ID选择器 #idname 匹配唯一具有指定ID的元素 #header { height: 60px; }（匹配id="header"的元素）
通配选择器 * 匹配所有元素（谨慎使用） * { margin: 0; padding: 0; }（重置所有元素的外边距和内边距）

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

二、组合选择器

组合类型 语法格式 描述 示例
后代选择器 A B 匹配A元素内的所有后代B元素（包括子、孙辈等） ul li { list-style: none; }（匹配<ul>内所有<li>）
子元素选择器 A > B 仅匹配A元素的直接子元素B（不包含孙辈） nav > ul { margin: 0; }（仅匹配<nav>的直接子<ul>）
相邻兄弟选择器 A + B 匹配A元素紧接其后的第一个同级B元素 .title + p { margin-top: 8px; }（匹配.title后的第一个<p>）
通用兄弟选择器 A ~ B 匹配A元素之后所有同级的B元素 .active ~ li { opacity: 0.7; }（匹配.active之后所有同级<li>）
多选择器组合 A, B, C 匹配A、B、C中任意一个元素（分组选择） h1, h2, h3 { font-weight: 600; }（匹配所有一、二、三级标题）

实战示例

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

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <p id="intro">这是一段介绍文本（ID选择器生效）。</p>
  <p>这是普通段落文本（元素选择器生效）。</p>
  <p class="highlight">这是需要高亮的文本（类选择器生效）。</p>
</body>
</html>

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

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

    /* 子元素选择器：仅匹配nav的直接子ul */
    nav > 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>
</head>
<body>
  <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>
</body>
</html>

示例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. 如何匹配<ul>中所有class为active的直接子<li>元素？ 答案：ul > li.active
  3. 以下选择器的含义是：h2 + p:not(.intro) 答案：匹配紧接在<h2>后的、且class不是intro的<p>元素
  4. 写出匹配"所有禁用状态的按钮（disabled属性）"的选择器： 答案：button[disabled]（属性选择器，将在7.2节详细讲解）

扩展阅读