带空格的CSS html声明

Question

如果有一个简单的谷歌搜索此问题，我现在道歉，但我不确定我想要使用哪些关键字。我对CSS很不错，但我认为我还没有充分利用该语言的功能，也完全消除了代码冗余。

我已经遇到过这段代码（其他许多类似的代码段）：

<p class="comment smallertext center-align">

这指的是什么CSS？ 就评论而言，smalllertext和center-align都是间隔的。

提前感谢您的任何回复和指导！

Answer 1

这意味着该元素具有以下所有类：comment，smallertext和center-align。在HTML中，空格在单个属性中分隔多个类名。

在CSS中，您可以使用.comment，.smallertext或.center-align中的一个或多个单独或一起定位此元素。有三个单独的规则和一个包含所有三个类的元素，所有三个规则都适用：

.comment {}
.smallertext {}
.center-align {}

如果需要，您还可以将它们组合在一起，以应用特定于具有所有三个类的元素的样式：

.comment.smallertext.center-align {}

Answer 2

示例中显示的代码链接到3个不同的css类选择器：

.comment {
}

.smallertext {
}

.center-align {
}

因此，不是制作大量不可重复使用的css选择器，而是将它们分成许多小的，它们提供的功能很可能会用于网站的许多不同部分。在该示例中，您有一个用于注释，一个用于较小的文本，一个用于居中对齐文本。

Answer 3

这是一种为单个元素定义多个类的方法。在这种情况下，它会匹配类comment，smallertext和center-align。

Answer 4

Try this short explanation...多个类可以更轻松地向元素添加特殊效果，而无需为该元素创建全新的样式。