我在使用 css 样式表时遇到问题。我将其范围缩小到了 css 样式的继承和特殊性。
现在（简化）我有一个 HTML
<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 属性具有更高的特异性，但我更喜欢将样式保留在样式表中）。
谢谢...
I'm having trouble with a css stylesheet. I've narrowed it down to be about inheritance and specificity in the css styles.
Right now (simplified) I've got an HTML <body> that looks like the following:
<div id="page-wrap">
<div class="unilogin-wrap">
<h1 class="unilogin-h1">Hello world!</h1>
</div>
</div>
Now, this is part of a uni-login form that needs to be used on several websites and therefore it has a seperate stylesheet for the specific unilogin style. However in the website stylesheet (style.css) the following is set:
#page-wrap h1{
font-size:18px;
margin-bottom: 18px;
margin-left:15px;
}
And in the unilogin stylesheet (unilogin.css) the following is set:
.unilogin-wrap h1.unilogin-h1 {
padding:0;
margin:0;
font-size:18px;
color:#596168;
text-shadow: 1px 1px 0px #fff;
}
However this won't override the inherited h1 style from style.css. If I put #page-wrap h1.unilogin-h1{} instead it works just fine. This is not an option though because it has to work on several websites all with different stylesheets that I can't just change.
Is the any way to override the specificity of the inherited h1 style in the second stylesheet without using inline html styling? (I know that the style="" html attribute has higher specificity, but I prefer to keep the styles in a stylesheet).
Thanks...
发布评论
评论（2）
尝试将
.unilogin-wrap h1.unilogin-h1 {更改为
.unilogin-wrap作用于#unilogin-wrap上try changing
.unilogin-wrap h1.unilogin-h1 {to
since
.unilogin-wrapacts on<whatever class="unilogin-wrap"and#unilogin-wrapon<whatever id="unilogin-wrap"更具结构性的解决方案：也给#page-wrap一个类
，然后在设置常规样式时引用该类。 （仅使用 id 进行绝对定位和单独隐藏/显示）
其他方法是使用 !important
显然，如果您依赖于此，它很容易受到污染并且维护起来会是一场噩梦，但对于特殊情况，它可能正是您所需要的。
The more structural solution: giving #page-wrap a class also
and then refer to the class when setting general styles. (Using the id only for absolute positioning and individual hiding / showing)
Other approach is using !important
Obviously, if you rely on this much it gets easily polluted and a nightmare to maintain, but for special cases it may be what you need.