Class 类选择器

学习

Class 类选择器

2026-02-23/0/ 编辑

Class 类选择器

什么是类选择器

类选择器使用 HTML 元素的 class 属性值作为选择器,选择具有特定类名的元素。

语法

.类名 {
  属性名1: 属性值1;
  属性名2: 属性值2;
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>类选择器</title>
  <style>
    .text-red {
      color: red;
    }

    .text-blue {
      color: blue;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #f0f0f0;
      margin: 10px;
      padding: 20px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <p class="text-red">红色文字</p>
  <p class="text-blue">蓝色文字</p>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
</body>
</html>

特点

1. 可以重复使用

类名可以在多个元素上重复使用。

<!-- 多个元素使用同一个类名 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px 0;
}

2. 一个元素可以有多个类名

一个元素可以同时拥有多个类名,用空格分隔。

<div class="card highlight large">
  这个元素有三个类名
</div>
.card {
  border: 1px solid #ddd;
}

.highlight {
  background-color: yellow;
}

.large {
  font-size: 20px;
}

3. 优先级中等

类选择器的优先级比标签选择器高,但比 ID 选择器低。

<style>
  .text-red { color: red; }   /* 生效 */

  div { color: blue; }       /* 被覆盖 */

  #special { color: green; }  /* 最高,但元素没有这个 ID */
</style>
<div class="text-red">红色文字</div>

命名规则

1. 以字母开头

/* 正确 */
.header { }
.box1 { }

/* 错误: 不能以数字开头 */
.1box { }

2. 只能包含字母、数字、下划线、连字符

/* 正确 */
.my-class { }
.my_class { }
.myClass { }

/* 错误: 包含特殊字符 */
.my@class { }
.my!class { }
.my class { }  /* 空格 */

3. 区分大小写

.header { }  /* 与 .Header 不同 */
.Header { }

4. 不能以连字符开头或结尾

/* 不推荐 */
-header { }
header- { }

常见命名方式

连字符命名法(推荐)

<div class="main-content"></div>
<div class="text-center"></div>
<div class="bg-blue"></div>
.main-content { }
.text-center { }
.bg-blue { }

下划线命名法

<div class="main_content"></div>
<div class="text_center"></div>
.main_content { }
.text_center { }

驼峰命名法(较少使用)

<div class="mainContent"></div>
.mainContent { }

实际应用

应用1: 组件样式

<style>
  .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-primary {
    background-color: #007bff;
    color: white;
  }

  .btn-success {
    background-color: #28a745;
    color: white;
  }
</style>
<body>
  <div class="card">
    <h3>卡片标题</h3>
    <p>卡片内容</p>
    <button class="btn btn-primary">主要按钮</button>
    <button class="btn btn-success">成功按钮</button>
  </div>
</body>

应用2: 文本样式

<style>
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }

  .text-red { color: red; }
  .text-blue { color: blue; }
  .text-green { color: green; }

  .font-bold { font-weight: bold; }
  .font-normal { font-weight: normal; }
</style>
<body>
  <p class="text-center">居中文本</p>
  <p class="text-left">左对齐文本</p>
  <p class="text-right">右对齐文本</p>
  <p class="text-red font-bold">红色粗体</p>
</body>

应用3: 布局工具类

<style>
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
  }

  .col {
    flex: 1;
    padding: 0 10px;
  }
</style>
<body>
  <div class="container">
    <div class="row">
      <div class="col">列1</div>
      <div class="col">列2</div>
      <div class="col">列3</div>
    </div>
  </div>
</body>

应用4: 响应式设计

<style>
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.33%; }
  .col-md-3 { width: 25%; }

  @media (max-width: 768px) {
    .col-sm-12 { width: 100%; }
    .col-sm-6 { width: 50%; }
  }
</style>
<body>
  <div class="row">
    <div class="col-md-3 col-sm-12">列1</div>
    <div class="col-md-3 col-sm-12">列2</div>
    <div class="col-md-3 col-sm-12">列3</div>
    <div class="col-md-3 col-sm-12">列4</div>
  </div>
</body>

多类名组合

场景1: 基础类 + 修饰类

<style>
  .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-primary {
    background-color: #007bff;
    color: white;
  }

  .btn-large {
    padding: 15px 30px;
    font-size: 18px;
  }
</style>
<body>
  <button class="btn btn-primary">普通按钮</button>
  <button class="btn btn-primary btn-large">大号按钮</button>
</body>

场景2: 间距工具类

<style>
  .m-10 { margin: 10px; }
  .m-20 { margin: 20px; }
  .m-t-10 { margin-top: 10px; }
  .m-b-10 { margin-bottom: 10px; }

  .p-10 { padding: 10px; }
  .p-20 { padding: 20px; }
  .p-t-10 { padding-top: 10px; }
  .p-b-10 { padding-bottom: 10px; }
</style>
<body>
  <div class="m-20 p-10">外边距20px,内边距10px</div>
  <div class="m-t-10 m-b-10">上下外边距10px</div>
</body>

与 ID 选择器的区别

特性类选择器ID 选择器
语法.class#id
唯一性可以重复必须唯一
使用次数可以多次使用同一页面只能用一次
优先级中等较高
适用场景样式复用、组件页面布局、唯一元素
<!-- 类选择器: 用于可复用样式 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>

<!-- ID 选择器: 用于唯一元素 -->
<div id="header">头部</div>
<div id="footer">页脚</div>

优先级

/* 优先级: ID 选择器(100) > 类选择器(10) > 标签选择器(1) */

#box {           /* 优先级: 100 */
  color: red;
}

.box {           /* 优先级: 10 */
  color: blue;
}

div {            /* 优先级: 1 */
  color: green;
}
<div id="box" class="box">
  显示红色(#box 生效)
</div>

优缺点

优点

  1. 可复用: 可以在多个元素上使用
  2. 灵活: 一个元素可以有多个类名
  3. 优先级适中: 容易覆盖和扩展
  4. 语义化: 类名可以表达样式或功能的含义

缺点

  1. 命名复杂: 需要规划类名,避免冲突
  2. 优先级问题: 多个类名可能有优先级冲突

最佳实践

1. 使用有意义的类名

<!-- 不推荐 -->
<div class="red">红色文字</div>
<div class="big">大盒子</div>

<!-- 推荐 -->
<div class="text-error">错误提示</div>
<div class="container">容器</div>

2. 使用连字符命名法

<!-- 推荐 -->
<div class="main-content"></div>
<div class="user-profile"></div>

3. 遵循 BEM 命名规范

<!-- BEM: Block__Element--Modifier -->
<div class="card">
  <div class="card__header">头部</div>
  <div class="card__body">内容</div>
  <div class="card__footer">页脚</div>
</div>

<div class="card card--highlight">
  高亮卡片
</div>
.card { }
.card__header { }
.card__body { }
.card__footer { }
.card--highlight { }

4. 使用工具类

<!-- 工具类: 原子化 CSS -->
<div class="text-center m-20 p-10 bg-blue">
  文本
</div>

学习要点

  1. 语法: .类名 { 属性: 值; }
  2. 可复用: 可以在多个元素上使用
  3. 多类名: 一个元素可以有多个类名
  4. 优先级: 中等,比标签选择器高,比 ID 选择器低
  5. 命名规则: 以字母开头,只包含字母、数字、下划线、连字符
  6. 命名建议: 使用连字符命名法,遵循 BEM 规范
  7. 适用场景: 组件样式、工具类、响应式设计
  8. 推荐: 优先使用类选择器进行样式定义
猜你喜欢