CSS class 选择器

CSS class 选择器语法

在 CSS 中，class 选择器也叫做 “类选择器”。我们可以对 “相同的元素” 或者 “不同的元素” 定义相同的 class 属性，然后针对拥有同一个 class 的元素进行 CSS 样式操作。

语法：

.class 名称 {
    属性: 值 ;
}

说明：

class 名前面必须要加上前缀英句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个 class 选择器。

CSS class 选择器

对于 class 选择器，小伙伴们要清楚以下几点。

class 在命名时要尽量语义化，应该能够体现元素的功能（如 .btn、.card、.highlight 等），避免使用无意义的名称（如 .style1、.box2 等）。
class 名称是严格区分大小写的，比如 .button 和 .Button 就是不同的 class。在实际开发中，class 名称一般建议使用纯小写。
class 选择器的优先级高于标签选择器，但低于 id 选择器和内联样式。
一个 HTML 元素可以同时应用多个 class，通过空格分隔，比如：

<div class="btn primary large"></div>

提示: 不同选择器的优先级是不一样的，另请参阅：CSS 选择器优先级。

CSS class 选择器示例

接下来，我们通过几个简单的例子来讲解一下 CSS 如何使用 class 选择器。

示例 1：为相同的元素定义 class

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .lvye { 
            color: red; 
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <div class="lvye">绿叶网</div>
    <div class="lvye">绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 为相同的元素定义 class

分析：

.lvye { 
    color: red;
}

上面这句代码表示，选中 class 为 “lvye” 的所有元素，然后定义它们文本颜色为红色。

虽然这个页面有 3 个 div，不过我们为后两个 div 设置同一个 class，从而使得可以同时操作它们的 CSS 样式。此外，第 1 个 div 文本颜色不会变红，因为它没有定义 class="lvye"，也就是没有被选中。

示例 2：为不同的元素定义 class

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .lvye { 
            color: red; 
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <p class="lvye">绿叶网</p>
    <span class="lvye">绿叶网</span>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 为不同的元素定义 class

分析：

p 和 span 是两个不同的元素，但我们为这两个不同的元素设置相同的 class，这样就可以同时为 p 和 span 定义相同的 CSS 样式了。

如果你要为两个或多个元素定义相同的样式，建议使用 class 选择器，因为这样可以减少大量重复代码。

示例 3：一个元素拥有多个 class

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .red {
            color: red;
        }
        .bold {
            font-weight: bold;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="red bold center">绿叶网 - 为好教程，全力以赴。</div>
    <div class="bold center">绿叶网 - 为好教程，全力以赴。</div>
</body>
</html>

页面效果如下图所示。

一个元素拥有多个 class

分析：

在这个例子中，第一个 div 元素同时使用了 red、bold、center 这 3 个 class，因此它会应用这 3 个 class 定义的所有样式。而第二个 div 元素只使用了 bold、center 这 2 个 class，因此它只会应用这 2 个 class 定义的样式。

示例 4：元素类型结合 class 选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p.warning {
            color: red;
            font-weight: bold;
        }
        div.warning {
            background-color: hotpink;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p class="warning">这是一个警告段落。</p>
    <div class="warning">这是一个警告区域。</div>
</body>
</html>

页面效果如下图所示。

结合元素类型使用 class 选择器

分析：

这里我们定义了一个名为 “warning” 的 class，然后 p.warning 指的是 “选取具有 class 为 warning 的 p 元素”，而 div.warning 指的是 “选取具有 class 为 warning 的 div 元素”。

这种将 “元素类型” 和 “class 选择器” 结合起来的写法是一个非常有用的技巧，在实际项目开发中用得非常多。