Question

假设我有这个简单的HTML页面

<html>
    <head>
        <link href="/styleA.css" rel="stylesheet" type="text/css" />
        <link href="/styleB.css" rel="stylesheet" type="text/css" />
        <link href="/styleC.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class='myDivClass'>Hello World!</div>
    </body>
</html>

如您所见，有三种样式表。让我们说这些样式表看起来像这样：

styleA.css

.myDivClass{
    background-color:red;
    color:black;
}

styleB.css

.myDivClass{
    background-color:blue;
    color:white;
}

styleC.css

.myDivClass{
     background-color:green;
}

正如您所看到的，它们都以某种方式将样式应用于myDivClass。浏览器如何选择哪种样式表在应用其样式方面更重要？

Answer 1

由于所有样式表中的所有规则都具有相同的特异性，因此当存在同意定义时，最后定义的规则将获胜。因此，您的div.myDivClass将在绿色背景上显示白色文字。

这可能会对您有所帮助 understand specificity 。

Answer 2

请参阅第6.4.1节级联订单 http://www.w3.org/TR/CSS2/cascade.html#cascading-order

基本上，更具体的应该赢，但在你的情况下，选择器是相同的，因此，规则4适用，其中最后指定的声明获胜。

Answer 3

它按顺序排列。 CSS中的“C”代表“Cascading”，意味着浏览器从顶部开始并向下运行。最后定义的样式是使用的样式。

浏览器如何选择要使用的样式表

3 个答案: