为什么第二个类属性不会覆盖前一个属性。 HTML

Question

浏览器解释HTML并在解释时显示结果。那么为什么第一个类属性不被第二个类覆盖。

<span class ='first' class= 'second' >text</span>

但如果我这样做

<span class ='first' class= 'second' style='color: green'>text</span>

以前的所有样式都会被覆盖。

这是fiddle。

谢谢。

Answer 1

两次使用相同的属性是无效的HTML，浏览器会执行错误恢复。

具体来说，来自the specification：

  

当用户代理离开属性名称状态时（如果合适，在发出标记令牌之前），必须将完整属性的名称与同一令牌上的其他属性进行比较;如果令牌上已经存在具有完全相同名称的属性，那么这是一个解析错误，必须删除新属性以及与之关联的值（如果有）。

因此，第二个类属性被忽略，因为开始标记已经有一个类属性。

（请注意，您可以在元素上指定多个类，因为该属性采用空格分隔列表：class="first second"）

样式属性不会覆盖类属性。该元素将具有与之关联的两个属性。但是，在应用样式表时，样式属性规则将比具有类选择器的规则具有更高的specificity，因此样式属性中指定的属性将赢得级联。

Answer 2

首先，语法无效，标签内只能包含1个class属性。

就过度骑行而言，inline styles在CSS中具有最高优先级。

使用多个类的正确方法是这样的

<span class ='first second'>text</span>

Demo

Answer 3

1. 一个html元素只能有1个class（或任何其他类型的属性中的1个），所以第二个将始终被浏览器拒绝（即使它看起来像元素有2个 - 实际上它只有一个）

2. 规则是元素上的style属性在class

中的样式之前始终具有优先级