CSS类选择器的用法（附带实例）

类是指具有相同特征的一类事物的总称。在 CSS 中，也可以将具有一系列相同特征的标签归到一类里。

在 CSS 中使用类选择器，需要先在 HTML 标签中使用 class 属性，并且为其定义一个自定义的名字，然后在 CSS 中使用“.自定义的类名”来进行选择。

例如：

<!DOCTYPE html>
<html>
<title>demo03.html</title>
<head>
  <meta charset="utf-8"/>
  <style>
    .t {
      color: red;
    }
  </style>
</head>
<body>
  <p>生活是
    <span class="t">一幅五彩斑斓的画卷</span>，
    用心情点缀每个精彩的瞬间
  </p>
  <p><strong>生活就像音乐。它必须靠耳朵、感觉和直觉来创作，而不是靠
    <strong class="t">规则</strong>。</strong></p>
</body>
</html>

这段代码中，第一个 标签中的 和第二个 标签中的 在进行修饰的时候都需要将字体颜色设置为红色，这个是共同特征，可以将这二者归在一类。然后在 和 标签中使用 class 属性指定了一个自定义的类名，最后在 CSS 中使用“.类名”的方式选中 和 标签，并设置字体颜色为红色。

运行代码查看效果，如下图所示：

图 1 测试类选择器

我们也可以使用“标签名.类名”的方式，选择具有类名的标签。示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>demo04.html</title>
  <meta charset="utf-8"/>
  <style>
    span.t {
      color: red;
    }
  </style>
</head>
<body>
  <p>生活是
    <span class="t">一幅五彩斑斓的画卷</span>，
    用心情点缀每个精彩的瞬间
  </p>
  <p>生活就像音乐。它<span class="t">必须</span>靠耳朵、感觉和直觉来创作，而不是靠
    <strong class="t">规则</strong>。
  </p>
</body>
</html>

上面代码选择了属于 t 这个类的 标签，将其字体颜色设置为红色。与上一段代码相比， 标签所包含的“规则”字体颜色没有变为红色。

运行代码查看效果，如下图所示：

图 2 测试使用“标签名.类名”的方式

一个标签有可能属于多个类。比如小尚这个学生还没有毕业就去实习了，那么这个标签既属于学生这个类，又属于职员这个类。也就是说，在 HTML中标签会书写多个类，此时就需要使用多个空格将多个类隔开。

示例代码如下：

<!DOCTYPE html>
<html>
<title>demo05.html</title>
<head>
  <meta charset="utf-8"/>
  <style>
    .t {
      color: red;
    }
    .t1 {
      font-size: 60px;
    }
  </style>
</head>
<body>
  <p>生活是
    <span class="t">一幅五彩斑斓的画卷</span>，
    用心情点缀每个精彩的瞬间。
  </p>
</body>
</html>

在这段代码中，t 这个类中设置了字体颜色为红色；t1 这个类中设置了字体大小为 100 像素。值得一提的是，第二个 标签中的 标签同时属于 t 和 t1 两个类，因此文字“必须”的字体会变为红色，字体大小是 100 像素。

运行代码查看效果，如下图所示：

图 3 测试多个类选择器

如果要选择同时具有多个类的选择器，可以使用“.类名1.类名2”的方式，具体代码如下：

<!DOCTYPE html>
<html>
<title>demo06.html</title>
<head>
  <meta charset="utf-8"/>
  <style>
    .t {
      color: red;
    }
    .t1 {
      font-size: 60px;
    }
    .t.t1 {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>生活是
    <span class="t">一幅五彩斑斓的画卷</span>，
    用心情点缀每个精彩的瞬间。
  </p>
  <p><strong>生活就像音乐。它<span class="t t1">必须</span>靠耳朵、感觉和直觉来创作，而不是靠
    <strong class="t1">规则</strong>。</strong></p>
</body>
</html>

在上面这段代码中，通过“.t.t1”的方式，选择了第二个 标签中同时具有 t 和 t1 两个类的标签，将其文字“必须”的背景色变为黄色。

运行代码查看效果，如下图所示：

图 4 测试同时具有多个类的选择器

CSS类选择器的用法（附带实例）

相关文章