Question

我有一个html文件如下：

<!DOCTYPE html>
<html>
    <head>
        <style>
        .social { color: red; border: 1px solid blue; display: inline-block;}
        .first { color: green; }
        </style>
    </head>
    <body>
        <p class="social">taco</p>
        <p class="first">burrito</p>
        <p class="first social">chimichanga</p>
    </body>
</html>

我首先使用课程＆＃39;和社交＆＃39;为第3段。但是，第3段的颜色总是绿色的（＆＃39; first＆＃39;）无论我是否先放置＆＃39;之前＆＃39;社交＆＃39;或之后。

那么，当多个样式类应用于一个元素时，浏览器如何决定css样式？

Answer 1

来自CSS2.1 specifications：

最后，按指定的顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。

在您的情况下，first类出现在内部样式表中的social类之后。由于两者具有相同的权重，来源和特异性，first规则的重叠样式（即颜色属性）获胜。

Answer 2

它是绿色的，因为类.first是应用于此元素的css选择器顺序中的最后一个。因此，如果你换掉它们就会变红。（.social之后的.first）

class属性中的引用顺序没有任何效果。

Here很长很旧，但很好地阅读了浏览器的工作原理，尤其是css计算的工作原理。

当多个CSS样式类应用于同一个元素时，真正的风格是什么？

2 个答案: