类选择器详细说明

定义：类选择器用于选择具有特定 class 属性的 HTML 元素。以 . 开头，后跟类名。

语法：

.className {
    property: value;
}

特点：

  1. 可复用性：一个类可以被多个元素使用。

  2. 优先级：类选择器的优先级高于标签选择器，但低于 ID 选择器。

  3. 组合使用：一个元素可以拥有多个类，实现样式的组合。

案例

HTML：

<p class="highlight">这是一个高亮段落。</p>
<p>这是一个普通段落。</p>
<p class="highlight important">这是一个重要且高亮的段落。</p>

CSS：

.highlight {
    background-color: yellow;
}

.important {
    font-weight: bold;
}

解释：

  • .highlight 类选择器为具有 highlight 类的段落添加黄色背景。

  • .important 类选择器为具有 important 类的段落加粗文本。

  • 第三个段落同时应用了 highlight 和 important 两个类，因此既有黄色背景，又加粗了文本。

总结

类选择器通过 class 属性为多个元素应用相同样式，具有高复用性和组合性，是 CSS 中常用的选择器之一。

本篇文章内容来源于：类选择器详细说明以及案例