I have an that I want to exclude from the general inheritance of the css. I have added ":not" on the css but it still passes the inheritance on the child. Also I have added both a new id and a new class and still doesn't follow non of them.
HTML code <a id="epLogin" href="#" class="pLogin" > GET ON TOP! </a>
<a id="epLogin" href="#" class="pLogin" > GET ON TOP! </a>
CSS formating
a:hover,
a:active,
a:focus,
#Mainbody div.tags a:hover,
#Mainbody a:not(#epLogin) {
color: #3498db;
}
#epLogin {
margin-top: 0px;
background: #00B5F7;
color: #fff;
font-weight: bold;
right: 20px;
height: 38px;
padding: 0 18px;
position: absolute;
top: 10px;
line-height: 39px;
}
You can't prevent element to inherit properties from their parents other than setting those properties to a specific value.
You can exclude an element from a selector, but then you have to do that for each variant of that selector:
a:not(#epLogin):hover,
a:not(#epLogin):active,
a:not(#epLogin):focus,
#Mainbody div.tags a:not(#epLogin):hover,
#Mainbody a:not(#epLogin)
But I wouldn't do that. It's much simpler to set a property to a basic value again. Especially when using a CSS preprocessor. For example:
a:hover, a:active, a:focus {
color: #3498db;
}
#epLogin a:hover, #epLogin a:active, #epLogin a:focus {
color: #fff;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.