CSS3 基础 - CSS3 选择器 - 类选择器

一、课程导入

思考问题

什么是类选择器？它与元素选择器有什么不同？
如何在HTML中定义类？如何在CSS中使用类选择器？
一个HTML元素可以有多个类吗？如果可以，如何使用？
类选择器的优先级是多少？它与元素选择器相比哪个优先级更高？
类选择器在实际项目中的应用场景有哪些？

学习目标

理解CSS3类选择器的基本概念
掌握类选择器的语法和使用方法
学会在HTML中定义类和在CSS中使用类选择器
了解类选择器的优先级和特殊性
能够在实际项目中灵活运用类选择器

二、核心知识点讲解

1. 类选择器简介

类选择器（Class Selector）是CSS中最常用的选择器之一，它通过HTML元素的class属性值来选择元素。与元素选择器不同，类选择器可以为不同类型的元素应用相同的样式，也可以为同一类型的元素应用不同的样式。

类选择器的语法：

.类名 {
  属性: 值;
  /* 更多样式声明 */
}

示例：

.text-red {
  color: red;
}

.text-center {
  text-align: center;
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

2. 在HTML中定义类

在HTML中，我们可以通过class属性为元素定义一个或多个类：

<!-- 单个类 -->
<p class="text-red">这段文本是红色的</p>

<!-- 多个类（用空格分隔） -->
<div class="box text-center">这个盒子有边框且文本居中</div>

3. 类选择器的工作原理

类选择器的工作原理是：遍历HTML文档中的所有元素，匹配具有指定类名的元素，并为这些元素应用指定的样式。

HTML文档结构：
┌─────────────────┐
│ <body>          │
│ ┌─────────────┐ │
│ │ <p class="text-red">段落1</p> │ ← 匹配 .text-red 选择器
│ └─────────────┘ │
│ ┌─────────────┐ │
│ │ <div class="box">盒子1</div> │ ← 匹配 .box 选择器
│ └─────────────┘ │
│ ┌─────────────┐ │
│ │ <div class="box text-center">盒子2</div> │ ← 匹配 .box 和 .text-center 选择器
│ └─────────────┘ │
└─────────────────┘

4. 类选择器的使用方法

基本用法

使用类选择器为具有特定类名的元素应用样式：

/* 为所有具有text-red类的元素设置样式 */
.text-red {
  color: red;
  font-weight: bold;
}

/* 为所有具有box类的元素设置样式 */
.box {
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

组合使用

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

/* 选择所有div元素中具有highlight类的元素 */
div.highlight {
  background-color: yellow;
  padding: 10px;
}

/* 选择所有具有box类且同时具有large类的元素 */
.box.large {
  width: 400px;
  height: 300px;
}

/* 选择所有p元素中具有text-center类的元素 */
p.text-center {
  text-align: center;
  margin-bottom: 20px;
}

5. 类选择器的优先级

在CSS中，类选择器的优先级高于元素选择器。具体优先级如下：

选择器类型	优先级值	示例
元素选择器	1	`p`
类选择器	10	`.class`
ID选择器	100	`#id`
内联样式	1000	`style=""`
!important	最高	`color: red !important;`

优先级示例：

/* 元素选择器 - 优先级：1 */
p {
  color: blue;
}

/* 类选择器 - 优先级：10 */
.text-red {
  color: red;
}

<!-- 应用.text-red类的样式，文本为红色 -->
<p class="text-red">这段文本是红色的，因为类选择器优先级高于元素选择器</p>

6. 类选择器的特殊性

类选择器的特殊性（Specificity）比元素选择器高，因为它可以更精确地选择元素。

特殊性计算规则：

元素选择器：0,0,0,1
类选择器：0,0,1,0
ID选择器：0,1,0,0
内联样式：1,0,0,0

特殊性示例：

/* 特殊性：0,0,0,1 */
p {
  color: blue;
}

/* 特殊性：0,0,1,0 */
.highlight {
  color: yellow;
}

/* 特殊性：0,0,1,1（类选择器 + 元素选择器） */
p.highlight {
  color: red;
}

二、核心知识点讲解

1. 类选择器的命名规范

良好的类命名规范可以提高代码的可读性和可维护性。以下是一些常用的类命名规范：

BEM命名规范

BEM（Block, Element, Modifier）是一种流行的类命名方法，它的命名格式为：

.block {
}

.block__element {
}

.block--modifier {
}

Block：独立的、可复用的组件
Element：Block的一部分，不能独立使用
Modifier：Block或Element的变体

示例：

/* 块 */
.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* 元素 */
.header__logo {
  font-size: 24px;
  font-weight: bold;
}

/* 修饰符 */
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

OOCSS命名规范

OOCSS（Object Oriented CSS）是一种面向对象的CSS编写方法，它强调样式的复用性和模块化。

示例：

/* 基础对象 */
.box {
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
}

/* 修饰符 */
.box-primary {
  background-color: #3498db;
  color: white;
}

.box-secondary {
  background-color: #f8f9fa;
  color: #333;
}

2. 类选择器的高级用法

多类选择器

一个HTML元素可以有多个类，CSS中可以通过连接多个类选择器来选择同时具有这些类的元素：

/* 选择同时具有box和highlight类的元素 */
.box.highlight {
  border-color: #ff9800;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
}

后代选择器与类选择器组合

类选择器可以与后代选择器组合使用，选择特定容器内的元素：

/* 选择nav容器内具有active类的链接 */
nav .active {
  color: #3498db;
  font-weight: bold;
  text-decoration: underline;
}

相邻兄弟选择器与类选择器组合

类选择器可以与相邻兄弟选择器组合使用，选择特定元素后的相邻元素：

/* 选择具有title类的元素后的p元素 */
.title + p {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 10px;
}

三、实用案例分析

案例一：创建产品卡片

需求分析

创建一个产品卡片组件，使用类选择器为不同部分设置样式，实现可复用的卡片设计。

实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品卡片示例</title>
  <style>
    /* 产品卡片容器 */
    .product-card {
      width: 300px;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      margin: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    
    /* 卡片悬停效果 */
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    /* 产品图片 */
    .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    /* 卡片内容 */
    .card-content {
      padding: 20px;
    }
    
    /* 产品标题 */
    .product-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    
    /* 产品描述 */
    .product-description {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px;
      color: #666;
    }
    
    /* 产品价格 */
    .product-price {
      font-size: 20px;
      font-weight: bold;
      color: #e74c3c;
      margin-bottom: 15px;
    }
    
    /* 按钮样式 */
    .btn {
      display: inline-block;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    /* 主要按钮 */
    .btn-primary {
      background-color: #3498db;
      color: white;
    }
    
    .btn-primary:hover {
      background-color: #2980b9;
    }
    
    /* 次要按钮 */
    .btn-secondary {
      background-color: #95a5a6;
      color: white;
      margin-left: 10px;
    }
    
    .btn-secondary:hover {
      background-color: #7f8c8d;
    }
  </style>
</head>
<body>
  <div class="product-card">
    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=smartphone%20product%20photo%20on%20white%20background&image_size=square" alt="智能手机" class="product-image">
    <div class="card-content">
      <h3 class="product-title">智能手机 Pro</h3>
      <p class="product-description">最新款智能手机，搭载强劲处理器，拥有出色的摄像头系统和长续航电池。</p>
      <div class="product-price">¥5999</div>
      <a href="#" class="btn btn-primary">立即购买</a>
      <a href="#" class="btn btn-secondary">了解更多</a>
    </div>
  </div>
  
  <div class="product-card">
    <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=laptop%20product%20photo%20on%20white%20background&image_size=square" alt="笔记本电脑" class="product-image">
    <div class="card-content">
      <h3 class="product-title">笔记本电脑 Air</h3>
      <p class="product-description">轻薄便携的笔记本电脑，拥有高清显示屏和快速的存储系统，适合办公和娱乐。</p>
      <div class="product-price">¥7999</div>
      <a href="#" class="btn btn-primary">立即购买</a>
      <a href="#" class="btn btn-secondary">了解更多</a>
    </div>
  </div>
</body>
</html>

案例分析

使用了类选择器为产品卡片的不同部分设置样式，包括.product-card、.product-image、.card-content、.product-title、.product-description、.product-price等
使用了BEM风格的命名规范，使类名清晰易懂
为卡片添加了悬停效果，提升用户体验
使用了.btn、.btn-primary、.btn-secondary等类实现了可复用的按钮样式
通过类选择器的组合使用，实现了复杂的样式效果

案例二：创建响应式导航栏

需求分析

创建一个响应式导航栏，使用类选择器为不同状态的导航项设置样式，实现交互效果。

实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航栏示例</title>
  <style>
    /* 导航栏容器 */
    .navbar {
      background-color: #333;
      overflow: hidden;
    }
    
    /* 导航列表 */
    .nav-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
    }
    
    /* 导航项 */
    .nav-item {
      float: left;
    }
    
    /* 导航链接 */
    .nav-link {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    
    /* 导航链接悬停效果 */
    .nav-link:hover {
      background-color: #555;
    }
    
    /* 当前活动导航项 */
    .nav-link.active {
      background-color: #3498db;
    }
    
    /* 下拉菜单容器 */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    /* 下拉菜单按钮 */
    .dropdown-btn {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      font: inherit;
      transition: background-color 0.3s ease;
    }
    
    .dropdown-btn:hover {
      background-color: #555;
    }
    
    /* 下拉菜单内容 */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    /* 下拉菜单项 */
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    /* 下拉菜单项悬停效果 */
    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }
    
    /* 显示下拉菜单 */
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    /* 响应式菜单按钮（在小屏幕上显示） */
    .menu-btn {
      display: none;
      background-color: #333;
      color: white;
      border: none;
      padding: 14px 16px;
      font-size: 16px;
      cursor: pointer;
    }
    
    /* 响应式样式 */
    @media screen and (max-width: 600px) {
      .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
      }
      
      .nav-list.active {
        display: flex;
      }
      
      .nav-item {
        float: none;
        width: 100%;
      }
      
      .dropdown {
        width: 100%;
      }
      
      .dropdown-content {
        position: relative;
        width: 100%;
      }
      
      .menu-btn {
        display: block;
        float: right;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <button class="menu-btn" onclick="toggleMenu()">☰ 菜单</button>
    <ul class="nav-list" id="navList">
      <li class="nav-item"><a href="#" class="nav-link active">首页</a></li>
      <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
      <li class="nav-item dropdown">
        <button class="dropdown-btn">产品 ▼</button>
        <div class="dropdown-content">
          <a href="#">智能手机</a>
          <a href="#">笔记本电脑</a>
          <a href="#">平板电脑</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <button class="dropdown-btn">服务 ▼</button>
        <div class="dropdown-content">
          <a href="#">技术支持</a>
          <a href="#">维修服务</a>
          <a href="#">在线咨询</a>
        </div>
      </li>
      <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
    </ul>
  </nav>
  
  <script>
    function toggleMenu() {
      document.getElementById("navList").classList.toggle("active");
    }
  </script>
</body>
</html>

案例分析

使用了类选择器为导航栏的不同部分设置样式，包括.navbar、.nav-list、.nav-item、.nav-link等
使用了.active类标记当前活动的导航项
实现了下拉菜单功能，使用了.dropdown、.dropdown-btn、.dropdown-content等类
添加了响应式设计，在小屏幕上显示汉堡菜单按钮
通过JavaScript和类选择器的结合，实现了菜单的显示和隐藏
为导航项和下拉菜单项添加了悬停效果，提升用户体验

三、实践练习

练习一：创建个人信息卡片

要求：

使用HTML和CSS3创建一个个人信息卡片
包含头像、姓名、职位、联系方式等信息
使用类选择器为不同部分设置样式
为卡片添加悬停效果
确保卡片布局合理，美观大方

练习二：创建定价表格

要求：

使用HTML和CSS3创建一个定价表格
包含至少三个 pricing tier（基础、标准、高级）
使用类选择器为不同等级的定价方案设置不同的样式
为每个定价方案添加"选择"按钮，并设置悬停效果
确保表格布局响应式，在不同屏幕尺寸上都能正常显示

练习三：理解类选择器的优先级

要求：

创建一个HTML页面，包含多个不同类型的元素
使用元素选择器、类选择器和ID选择器为同一个元素设置不同的样式
观察并分析不同选择器的优先级
理解CSS优先级规则的应用

四、课程总结

核心知识点回顾

类选择器是CSS中常用的选择器，通过HTML元素的class属性来选择元素
类选择器的语法：.类名 { 属性: 值; }
一个HTML元素可以有多个类，用空格分隔
类选择器的优先级为10，高于元素选择器的优先级1
类选择器的特殊性计算规则：0,0,1,0
类选择器可以与其他选择器组合使用，实现更复杂的选择逻辑
良好的类命名规范（如BEM）可以提高代码的可读性和可维护性

学习建议

熟练掌握类选择器的基本用法，这是CSS布局的基础
学习并遵循良好的类命名规范，如BEM或OOCSS
理解类选择器的优先级和特殊性，避免样式冲突
学会合理组织CSS代码，使用注释提高代码的可读性
多做实践练习，通过实际项目巩固所学知识
了解CSS预处理器（如Sass、Less）如何进一步提高类选择器的使用效率

下一步学习

学习ID选择器的使用方法和应用场景
掌握属性选择器的高级用法
了解伪类和伪元素选择器的功能
学习CSS选择器的组合使用技巧

通过本课程的学习，相信你已经掌握了CSS3类选择器的基本概念和使用方法。类选择器是CSS中最常用的选择器之一，它为我们提供了一种灵活、高效的方式来为HTML元素应用样式。在后续的学习中，我们将继续探索其他类型的CSS选择器，进一步提高我们的样式设计能力。