CSS继承和特异性答案

【问题标题】：CSS inheritance and specificityCSS继承和特异性
【发布时间】：2011-07-10 11:37:19
【问题描述】：

我在使用 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 属性具有更高的特异性，但我更喜欢将样式保留在样式表中）。

谢谢...

【问题讨论】：

【解决方案1】：

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

到

#unilogin-wrap h1.unilogin-h1 {

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

【讨论】：

【解决方案2】：

更结构化的解决方案：也给#page-wrap 一个类

<div id='page-wrap' class='page_wrap'>

然后在设置通用样式时参考类。（使用id仅用于绝对定位和单独隐藏/显示）

其他方法是使用 !important

 margin:0 !important;

显然，如果您如此依赖它，它很容易被污染并且维护起来是一场噩梦，但对于特殊情况，它可能是您所需要的。

【讨论】：