CSS-单个元素htm上的多个类

在一个HTML元素上使用多个类是一种好习惯吗? 例如:

<div class="nav nav-centered nav-reversed navbar navigation-block"></div>

我并不是说一个元素上的两个或三个类是不好的,但是四个,五个甚至六个呢?

Andrius asked 2020-08-11T18:17:47Z
2个解决方案
60 votes

简短答案

是。


说明

这是一个好习惯,因为一个元素可以属于不同组,并且您可能希望特定元素成为多个组的一部分。 在HTML5中,该元素可以容纳无限多个类,而在HTML4中,元素受到特定长度的限制。

下面的示例将向您展示多个类的用法。

头等舱使文本background-color红色。

第二类使background-color蓝色。

了解具有多个类的DOM元素的行为,它将同时佩戴两个CSS语句。

结果:不同类中的多个CSS语句将堆叠在一起。

您可以阅读有关CSS特异性的更多信息。


的CSS

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

的HTML

<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>

现场演示

Jeff Noel answered 2020-08-11T18:18:46Z
4 votes

如果需要它们,这是一个好习惯。 这也是一个好习惯,因为它们有意义,因此将来的编码人员可以了解您在做什么。

但是总的来说,不,将10个类名附加到一个对象不是一个好习惯,因为很可能无论您将它们用作什么,都可以用更少的类来完成同一件事。 大概只有1或2。

为了使该语句符合条件,javascript插件和脚本可能会添加更多的类名,以执行其将要执行的操作。 例如,Modernizr会将5到25个类别的任何地方追加到您的body标签,这是有充分理由的。 当您使用该库中的小部件之一时,jQuery UI会追加许多类名。

relic answered 2020-08-11T18:19:16Z
translate from https://stackoverflow.com:/questions/17366432/multiple-classes-on-single-element-html