我有一个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>
我在第三段中使用了"first"one_answers"social"类。然而，无论我是把"first"放在"social"之前还是之后，第三段的颜色都是绿色（"irst"）。
那么，当多个样式类应用于一个元素时，浏览器如何决定css样式呢？
来自CSS2.1规范：
最后，按指定的顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。
在您的案例中，first类出现在内部样式表中的social类之后。由于两者具有相同的权重、起源和特异性，因此first规则的重叠样式（即颜色属性）获胜。
它是绿色的，因为类.first是应用于该元素的css选择器顺序中的最后一个。因此，如果你交换它们，它将变为红色。（.first之后的.social）
class属性中的引用顺序没有任何作用。
以下是关于浏览器如何工作，特别是css计算如何工作的很长很老但很好的读物。