我能给一个HTML元素提供两个类属性吗？如果是这样的话，如果我向他们两个写代码，那么İ会对我的页面产生什么影响呢？

Question

我想知道哪一个选择会影响我的div，为什么？

 <div class="div-1" class="div-2"></div>

CSS

.div-1 {
    width: 200px;
    height: 300px;
    background-color: gray;
}

.div-2 {
    width: 200px;
    height: 300px;
    background-color: blue;
}

片段

​

.div-1 {
  width: 200px;
  height: 300px;
  background-color: gray;
}

.div-2 {
  width: 200px;
  height: 300px;
  background-color: blue;
}

<div class="div-1" class="div-2"></div>

​

Answer 1

解析开始标记时，第二个class属性将触发一个重复属性解析错误并被忽略。

如果令牌上已有完全相同名称的属性，则这是一个重复属性解析错误，必须从令牌中删除新属性。

因此，只有第一个class属性将被添加，因此将应用于div的惟一类是div-1，因此只有第一个规则集适用。

注意，您可以对单个元素应用多个类，因为class属性接受类的空格分隔的list。在这种情况下，叶栅的常规规则将适用(第二个规则集的属性覆盖第一个规则的重复属性，因为选择器具有相同的特异性，因此它们是按外观顺序应用的)。