CSS inheritance and specificity
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 s开发者_开发技巧et:
.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...
try changing .unilogin-wrap h1.unilogin-h1 {
to
#unilogin-wrap h1.unilogin-h1 {
since .unilogin-wrap acts on <whatever class="unilogin-wrap" and #unilogin-wrap on <whatever id="unilogin-wrap"
The more structural solution: giving #page-wrap a class also
<div id='page-wrap' class='page_wrap'>
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
margin:0 !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.
加载中,请稍侯......
精彩评论