迹忆客 专注技术分享

本篇文章将介绍在 CSS 中的单个元素中使用多个类的方法。

在 CSS 中将多个类分配给一个元素并同时为两个类设置样式

在 HTML 中，我们使用 class 属性将类分配给元素。我们可以在 HTML 中的所有元素上应用 class，比如 p、h1-h6、a、div 等等。在 CSS 中，我们使用类选择器 . 选择具有相应类名的元素，我们可以对其应用样式。但是在某些情况下，我们希望将多个元素分配给单个类并为这些类设置样式。在这种情况下，HTML 允许我们为单个元素分配多个类。我们可以在任何元素中编写由空格分隔的多个类名。CSS 还允许我们通过同时选择两个类来设置这些类的样式。我们可以使用 . 选择器选择第一类并再次选择第二类而不留空格。然后我们可以为选定的类设置样式。我们可以将两个以上的类分配给一个元素，并一次将样式应用于所有类。

例如，在 HTML 中创建三个 p 标签，并为它们指定类名 first、second 和 first second。请注意，对于第三个类，类名之间保留了一个空格。在 p 标签之间为三个级别编写文本 KTM、Honda 和 Kawasaki。在 CSS 中选择类 first 并将其 color 设置为 orange。同样，选择类别 second 并将其设置为 red，最后选择这两个类别为 .first.second 并将颜色设置为 green。

在下面的示例中，我们在单个元素中使用了多个类，并一次为这些类设置样式。

示例代码：

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

在 CSS 中将多个类分配给一个元素并分别为两个类设置样式

我们可以将多个类分配给单个 HTML 元素并分别设置两个类的样式以更有效地编写 CSS。使用这种方法，我们可以控制应用样式中的冗余。我们可以将通用样式应用于多个类，并将唯一样式应用于特定类。

例如，在 p 标签中创建一个类 title 并编写一些文本。类似地，创建另一个段落标记并为其分配多个类 title text。在段落标签上写一些文字。在 CSS 中，选择 title 类并将 background-color 设置为 skyblue。然后选择 text 类并为其指定 green 颜色。

在这里，两个段落的背景颜色都将设置为天蓝色。这是因为我们已经为 title 类设置了背景颜色。而且，两个段落中都有一个 title 类。但是，第二段只会将其颜色更改为 green，因为我们仅将此样式应用于 text 类。这种方法使我们能够为单个元素使用多个类，以将通用样式和个别样式应用于元素。通过这种方式，我们可以为单个元素分配多个类，并可以单独设置类的样式以编写高效的 CSS。

示例代码：

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}