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

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

css

什么'；当多个CSS样式类应用于同一个元素时，真正的样式是什么？,css,Css,我有一个html文件，如下所示： <!DOCTYPE html> <html> <head> <style> .social { color: red; border: 1px solid blue; display: inline-block;} .first { color: green; } </style> </head> <

我有一个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>


.social{颜色：红色；边框：1px纯蓝色；显示：内联块；}
.first{颜色：绿色；}
塔可
煎饼
chimichanga

我在第三段中使用了“first”和“social”两个类。然而，第三段的颜色总是绿色（“第一”），无论我是在“社交”之前还是之后加上“第一”

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

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

在您的情况下，

first

类出现在内部样式表中

social

类之后。由于两者具有相同的权重、来源和特异性，

first

规则的重叠样式（即颜色属性）获胜。

之所以为绿色，是因为class

。first

是应用于此元素的css选择器顺序中的最后一个。因此，如果你交换它们，它将变成红色。（

.social

在

.first

之后）

class属性中的引用顺序不起任何作用

这本书很长，很老，但很好地了解了浏览器的工作原理，尤其是css计算的工作原理。

无论我是将“第一”放在“社交”之前还是之后

。。。你指的是

标签中的顺序还是那些样式的应用？当然，这是元素中的顺序。看看这篇文章，它概括了css指令的应用顺序。对我来说，这本书很有启发性