css - CSS的继承性和特异性

我在使用CSS样式表时遇到麻烦。我将其范围缩小为关于CSS样式的继承和特定性。

现在（简化），我得到了一个如下所示的HTML <body>：

<div id="page-wrap">
    <div class="unilogin-wrap">
        <h1 class="unilogin-h1">Hello world!</h1>
    </div>
</div>

现在，这是uni-login表单的一部分，需要在多个网站上使用，因此对于特定的unilogin样式，它具有单独的样式表。但是，在网站样式表（style.css）中设置了以下内容：

#page-wrap h1{
    font-size:18px;
    margin-bottom: 18px;
    margin-left:15px;
}

并且在unilogin样式表（unilogin.css）中设置了以下内容：

.unilogin-wrap h1.unilogin-h1 {
    padding:0;
    margin:0;
    font-size:18px;
    color:#596168;
    text-shadow: 1px 1px 0px #fff;
}

但是，这不会覆盖从style.css继承的h1样式。如果我放#page-wrap h1.unilogin-h1{}相反，它就可以了。但是，这不是一个选择，因为它必须在具有不同样式表的多个网站上运行，而我不能仅仅更改这些样式表。

是否有任何方法可以在不使用内联html样式的情况下覆盖第二个样式表中继承的h1样式的特殊性？（我知道style =“” html属性具有更高的特异性，但我更喜欢将样式保留在样式表中）。

谢谢...

最佳答案

尝试更改.unilogin-wrap h1.unilogin-h1 {

至

#unilogin-wrap h1.unilogin-h1 {

因为.unilogin-wrap作用于<whatever class="unilogin-wrap"而#unilogin-wrap作用于<whatever id="unilogin-wrap"

关于css - CSS的继承性和特异性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6640840/