当前位置：首页 > article >正文

CSS 中最常用的三种选择器的详细讲解（配合实例）

article 2025/3/4 5:07:03

一、元素选择器（标签选择器）

1. 定义

通过 HTML 标签名 直接选择元素，是最基础的选择器。

2. 语法

css复制代码

标签名 {
  属性: 值;
}

3. 示例

html复制代码

<style>
  /* 选中所有 <p> 标签 */
  p {
    color: blue;
    font-size: 16px;
  }

  /* 选中所有 <h1> 标签 */
  h1 {
    background-color: yellow;
  }
</style>

<h1>标题会变黄底</h1>
<p>这段文字是蓝色，16像素</p>
<p>另一个段落也会生效</p>

4. 特点

优点：简单直接，适合全局样式（如统一段落字体）。
缺点：不够精准，会选中所有同名标签。
应用场景：统一页面基础样式（如重置默认边距）。

二、类选择器（Class 选择器）

1. 定义

通过 HTML 元素的 class 属性值选择元素，是 最灵活、最常用 的选择器。

2. 语法

css复制代码

.class名 {
  属性: 值;
}

3. 示例

html复制代码

<style>
  /* 选中所有 class="highlight" 的元素 */
  .highlight {
    background-color: pink;
    padding: 10px;
  }

  /* 单独定制某个类的样式 */
  .warning {
    color: red;
    border: 2px solid red;
  }
</style>

<p class="highlight">这个段落有粉色背景</p>
<div class="highlight warning">这个容器同时有粉色背景和红色边框</div>
<button class="warning">警告按钮</button>

4. 特点

优点：
- 可重复使用：一个类可应用于多个元素。
- 组合灵活：一个元素可添加多个类（用空格分隔）。
应用场景：定义可复用的样式模块（如按钮样式、卡片样式）。

5. 重要规则

类名 不能以数字开头（如 .1box 是无效的）。
类名建议用 语义化命名（如 .btn-primary 比 .red-button 更好）。

三、ID 选择器

1. 定义

通过 HTML 元素的 id 属性值选择元素，用于选择唯一的特定元素。

2. 语法

css复制代码

#id名 {
  属性: 值;
}

3. 示例

html复制代码

<style>
  /* 选中 id="header" 的元素 */
  #header {
    height: 80px;
    background-color: #333;
  }

  /* 选中 id="submit-btn" 的按钮 */
  #submit-btn {
    width: 200px;
    background-color: green;
  }
</style>

<div id="header">这是页面头部</div>
<button id="submit-btn">提交按钮</button>

4. 特点

优点：精准定位单个元素。
缺点：
- 不可重复：同一页面中 id 值必须唯一。
- 优先级过高：容易导致样式难以覆盖（慎用！）。
应用场景：唯一元素的样式（如页面头部、导航栏）。

四、三种选择器对比总结

特征	元素选择器	类选择器	ID 选择器
语法	`p {}`	`.class {}`	`#id {}`
选中范围	所有同名标签	所有相同 class 的元素	唯一元素
复用性	全局生效	可重复使用	不可重复
优先级权重	1	10	100
适用场景	基础样式重置	通用样式模块	唯一元素定制

五、代码实战演示

html复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 1. 元素选择器：选中所有 <h2> 标签 */
        h2 {
            color: gray; /* 默认文字颜色为灰色 */
            text-decoration: underline; /* 添加下划线 */
        }

        /* 2. 类选择器：选中所有 class="box" 的元素 */
        .box {
            width: 200px;
            height: 100px;
            border: 2px solid black; /* 黑色实线边框 */
            margin: 20px; /* 外边距 */
            padding: 10px; /* 内边距 */
            background-color: lightblue; /* 浅蓝色背景 */
        }

        /* 3. 类选择器叠加：选中同时有 class="box" 和 "special" 的元素 */
        .box.special {
            background-color: pink; /* 粉色背景（覆盖之前的浅蓝色） */
            border-color: red; /* 边框颜色改为红色 */
        }

        /* 4. ID选择器：选中 id="main-title" 的元素 */
        #main-title {
            color: darkblue; /* 文字颜色改为深蓝色（覆盖元素选择器的灰色） */
            font-size: 24px; /* 字体放大 */
            text-decoration: none; /* 移除下划线 */
        }
    </style>
</head>
<body>
    <!-- h2 标题（应用元素选择器样式） -->
    <h2>普通标题（元素选择器生效）</h2>

    <!-- h2 标题（同时应用元素选择器和 ID 选择器样式） -->
    <h2 id="main-title">主标题（ID 选择器覆盖元素选择器）</h2>

    <!-- div 容器（应用类选择器样式） -->
    <div class="box">普通容器（类选择器生效）</div>

    <!-- div 容器（同时应用两个类选择器样式） -->
    <div class="box special">特殊容器（叠加类选择器样式）</div>
</body>
</html>

代码逐行解析

1. 元素选择器 `h2`

css复制代码

h2 {
    color: gray;
    text-decoration: underline;
}

作用：所有 <h2> 标题文字为灰色，带下划线。
页面效果：
- 第一个 <h2>（普通标题）：灰色文字 + 下划线。
- 第二个 <h2 id="main-title">：由于 ID 选择器的优先级更高，文字颜色被覆盖为深蓝色，下划线被移除。

2. 类选择器 `.box`

css复制代码

.box {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
    background-color: lightblue;
}

作用：所有 class="box" 的容器为浅蓝色背景，黑色边框，尺寸固定，有内外边距。
页面效果：
- 第一个 <div class="box">：浅蓝色背景 + 黑色边框。
- 第二个 <div class="box special">：由于叠加了 .box.special 类，背景变为粉色，边框变红色。

3. 类选择器叠加 `.box.special`

css复制代码

.box.special {
    background-color: pink;
    border-color: red;
}

作用：只有同时拥有 class="box" 和 class="special" 的容器，背景变为粉色，边框红色。
关键点：多个类名用空格分隔（如 <div class="box special">）。

4. ID 选择器 `#main-title`

css复制代码

#main-title {
    color: darkblue;
    font-size: 24px;
    text-decoration: none;
}

作用：id="main-title" 的标题文字为深蓝色，24像素，无下划线。
优先级：ID 选择器优先级高于元素选择器，因此覆盖了 <h2> 的灰色文字和下划线。

浏览器效果预览

元素	效果
第一个 `<h2>`	灰色文字 + 下划线
第二个 `<h2 id="main-title">`	深蓝色文字 + 24px 字号 + 无下划线（ID 选择器覆盖元素选择器）
第一个 `<div class="box">`	浅蓝色背景 + 黑色边框 + 固定尺寸（类选择器生效）
第二个 `<div class="box special">`	粉色背景 + 红色边框（叠加类选择器生效）