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>
现场演示
4 votes
如果需要它们,这是一个好习惯。 这也是一个好习惯,因为它们有意义,因此将来的编码人员可以了解您在做什么。
但是总的来说,不,将10个类名附加到一个对象不是一个好习惯,因为很可能无论您将它们用作什么,都可以用更少的类来完成同一件事。 大概只有1或2。
为了使该语句符合条件,javascript插件和脚本可能会添加更多的类名,以执行其将要执行的操作。 例如,Modernizr会将5到25个类别的任何地方追加到您的body标签,这是有充分理由的。 当您使用该库中的小部件之一时,jQuery UI会追加许多类名。