CSS 类选择器

需要人为指定部分HTML元素，为它们统一设置样式。这时可以使用类选择器，也称class选择器。

1 基本步骤

第1步：定义class样式

.class值{
 样式内容
}

class值前面有英文句号，表示类选择器；

第2步：为这部分HTML元素设置class属性为上述值。

<标签 class="class值">

class值需要与第1步的class值对应，这里不用英文句号；

可以为不同的标签设置相同的class值。

其实两步无所谓先后，class值对应即可。

2 示例

需求：要把歌词的字体，第1、2、6句统一设置颜色、并加粗。

实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" >
    <title>css 类选择器  例子 | 关关教程</title>

    <style>
        .class1{
            color:#f00;
            font-weight: 700;
        }
    </style>
</head>

<body>

    <h1 class="class1">罗刹海市 — 刀郎</h1>
    <div  class="class1">未曾开言先转腚</div>
    <div  class="class1">每一日蹲窝里把蛋来卧</div>
    <div>老粉嘴多半辈儿以为自己是只鸡</div>
    <div  class="class1">那马户不知道他是一头驴</div>
    <div>那又鸟不知道他是一只鸡</div>
    <div>勾栏从来扮高雅</div>
    <div>自古公公好威名</div>    
        
</body>

</html>

再也不用每个div重复设置style属性了，轻松。

3 1个元素设置多个类

设置html元素时，可以为class属性设置多个值。

<标签 class="class1 class2… classN" >…

各个类用空隔分开。

该元素同时具有多个class对应的样式。

示例

<head>
    <meta charset="UTF-8" >
    <title>css 类选择器  例子 | 关关教程</title>

    <style>
        .class1{
            color:#f00;
            font-weight: 700;
        }

        .class2{
            border: 1px solid #f00;
        }

        .class3{
            font-size: 24px;
        }
    </style>
</head>

<body>

    <h1>罗刹海市 — 刀郎</h1>
    <div  class="class1 class2 class3">未曾开言先转腚</div>
    <div >每一日蹲窝里把蛋来卧</div>
        
</body>

❮上一节 CSS 标签选择器下一节 CSS ID选择器❯

第06章 CSS基础教程

CSS 类选择器

1 基本步骤

2 示例

3 1个元素设置多个类

html教程