Question

在CSS样式中，当两个具有相同权重的类时，后面声明的一个将覆盖前一个，就像下面的代码一样

<html>
<head>
<style type="text/css">
h1.first  {color:blue;}
h1.second {color:cyan;}
</style>
</head>

<body>
<h1 class="first second">The heading text</h1>
</body>
</html>

切换'第一'和'第二'不会影响最终的'青色'颜色。当我尝试将类列表拆分为多个类时，似乎订单会影响最终结果，例如，使用时

<h1 class="first" class="second">The heading text</h1>

使用

时，最终颜色为“蓝色”

<h1 class="second" class="first">The heading text</h1>

最终颜色为“青色”

有人可以提供有关差异的更详细说明吗？看来如果我拆分类列表，只有第一个类属性才有效？似乎拆分不会合并到一个单一的类列表中。感谢。

Answer 1

该元素只能有一个class属性。因此，当您添加两个时，第二个被忽略，这就是您获得该行为的原因。

注意：第二个被忽略的事实是浏览器特定的实现。我不知道浏览器的做法有所不同，但基本上该文档无效，浏览器可以解决问题＆＃39;他们想要的任何方式。

The HTML Syntax表示同一个元素上不应存在多个具有相同名称的属性，但它并没有说明如何解决这个问题，因此这取决于浏览器供应商。< / p>

Answer 2

正如其他人所说，你只能按照HTML标准在元素上定义一个属性，并且正如@GolezTrol所解释的那样，规范没有说明如何处理，因此大多数浏览器都忽略了class =＆＃34的第二个声明; XXX＆＃34;共

<h1 class="first second">The heading text</h1>

由于CSS声明的定义方式，因此总是青色。根据{{3}}，您在第一个之后定义了第二个。

规范声明为6.4.1级联顺序下的第4条规则：

最后，按指定顺序排序：如果两个声明具有相同的顺序重量，起源和特异性，后者指定获胜。导入样式表中的声明被认为是在任何声明之前样式表本身的声明

所以如果你改变定义，就像这样：

<html>
<head>
<style type="text/css">
h1.second {color:cyan;}
h1.first  {color:blue;}

</style>
</head>

然后颜色将被定义为蓝色而不是青色。

这有帮助吗？

Answer 3

他们可以在元素中编写多个类，如下所示：

<h1 class="first second">The heading text</h1>

如果您使用2个类对相同属性进行样式设置，则最后一个类将占优势，另一个类将被忽略。

多个类属性和具有多个类的单个类列表之间有什么区别？

3 个答案: