Question

我遇到了css样式表的问题。我把它缩小到了css样式中的继承和特异性。

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

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

现在，这是需要在多个网站上使用的单一登录表单的一部分，因此它具有针对特定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属性具有更高的特异性，但我更喜欢将样式保存在样式表中。）

...谢谢

Answer 1

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

到

#unilogin-wrap h1.unilogin-h1 {

因为.unilogin-wrap对<whatever class="unilogin-wrap"上的#unilogin-wrap和<whatever id="unilogin-wrap"采取行动

Answer 2

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

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

然后在设置常规样式时引用该类。（仅将id用于绝对定位和个人隐藏/显示）

其他方法正在使用！important

 margin:0 !important;

显然，如果你依赖这么多，它很容易受到污染，并且需要维持噩梦，但对于特殊情况，它可能就是你所需要的。