在单个元素html上的多个类 [英] multiple classes on single element html

问题描述

在一个HTML元素上使用许多类是一个好习惯吗？例如：

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

我不是说一个元素上的两个或三个类是坏的，五个甚至六个？

解决方案

短回答​​

/ p>

---

说明

/ strong>，因为元素可以是不同组的一部分，并且您可能希望特定元素成为多个组的一部分。元素可以在HTML5中保存无限数量的类，而在HTML4中，您受到特定长度的限制。

以下示例将显示您使用多个类。

第一个类使文本 color red 。

第二个类使 background-color



查看多个类的 DOM元素的行为方式，它会穿戴<

结果：不同类中的多个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> 
  

Live demo < a>

Is it a good practice to use many classes on one single HTML element? For example:

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

I don't mean that two or three classes on one element is bad, but how about four, five or even six?

解决方案

Short Answer

Yes.

---

Explanation

It is a good practice since an element can be a part of different groups, and you may want specific elements to be a part of more than one group. The element can hold an infinite number of classes in HTML5, while in HTML4 you are limited by a specific length.

The following example will show you the use of multiple classes.

The first class makes the text color red.

The second class makes the background-color blue.

See how the DOM Element with multiple classes will behave, it will wear both CSS statements at the same time.

Result: multiple CSS statements in different classes will stack up.

You can read more about CSS Specificity.

---

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>

Live demo

这篇关于在单个元素html上的多个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！