0

我在使用 CSS 样式表时遇到了问题。我已将其范围缩小到关于 CSS 样式的继承和特殊性。

现在（简化）我有一个<body>如下所示的 HTML：

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

谢谢...

4

2 回答 2

1

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

到

#unilogin-wrap h1.unilogin-h1 {

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

于 2011-07-10T11:54:19.670 回答
0

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

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

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

其他方法是使用 !important

 margin:0 !important;

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

于 2011-07-10T11:48:30.537 回答