在 CSS 中的一个元素中使用多个类

Subodh Poudel 2023年2月20日 2021年10月30日
  1. 在 CSS 中将多个类分配给一个元素并同时为两个类设置样式
  2. 在 CSS 中将多个类分配给一个元素并分别为两个类设置样式
在 CSS 中的一个元素中使用多个类

本教程将介绍在 CSS 中的单个元素中使用多个类的方法。

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

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

例如,在 HTML 中创建三个 p 标签,并为它们指定类名 firstsecondfirst second。请注意,对于第三个类,类名之间保留了一个空格。在 p 标签之间为三个级别编写文本 KTMHondaKawasaki。在 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;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn