Question

我有一个只有一个按钮的html页面

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="css1.css" type="text/css">
        <link rel="stylesheet" href="css2.css" type="text/css">
    </head>
    <body>
        <div class="container">
            <button class="btn ovalbtn">
                Save
            </button>
        </div>
    </body>
</html>

这些是使用的2个css类：

CSS1：

.container .btn {
    font-size: 4.0em;
}

CSS2：

.ovalbtn{
    font-size: 16px;
}

我想知道为什么按钮从CSS1获取字体大小，而我用CSS2中的另一个类覆盖它。我知道它与css特异性有关，但我对这方面的知识很浅。

Answer 1

由于特异性，。

类选择器具有给定的特异性级别。两个类选择器比单个类选择器更具体。因此，具有两个类选择器的规则集中的规则（以及其他任何内容）将覆盖具有单个类选择器的规则集中的相同属性的规则（并且没有别的）。

Answer 2

因为在你的CSS 1按钮中有比CSS 2更具体的规则。如果两个CSS在他们的规则中都有.container类，那么你的CSS 2将对该按钮产生影响

因此，如果您想要影响您的CSS 2，请按照以下步骤进行一次更改： -

.container .ovalbtn {
    font-size: 16px;
}

Answer 3

浏览器显示CSS1，因为它比CSS2更具体。当浏览器看到不同的CSS代码更改相同的元素时，它会应用更具体的CSS代码。

您可以阅读CSS Specificity here。

嵌套CSS覆盖元素类

3 个答案: