如何从css继承中排除标记(:不起作用)

时间:2014-04-03 10:09:27

标签: html css css3 inheritance

我想要从css的一般继承中排除。 我添加了":not"在CSS上但它仍然传递给孩子的继承。 此外,我添加了一个新的ID和一个新的类,但仍然没有跟随它们。

HTML代码  <a id="epLogin" href="#" class="pLogin" > GET ON TOP! </a>

CSS格式化

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;
}

1 个答案:

答案 0 :(得分:3)

除了将这些属性设置为特定值之外,您无法阻止元素从其父级继承属性。

您可以从选择器中排除某个元素,但是您必须为该选择器的每个变体执行此操作:

a:not(#epLogin):hover,
a:not(#epLogin):active,
a:not(#epLogin):focus,
#Mainbody div.tags a:not(#epLogin):hover,
#Mainbody a:not(#epLogin)

但我不会这样做。将属性再次设置为基本值要简单得多。特别是在使用CSS预处理器时。例如:

a:hover, a:active, a:focus {
    color: #3498db;
}

#epLogin a:hover, #epLogin a:active, #epLogin a:focus {
    color: #fff;
}