如何从CSS继承中排除标签（：not不起作用）

Question

我有一个要从CSS的一般继承中排除的对象。 我在CSS上添加了“：not”，但它仍将子级的继承传递给了它。 另外，我添加了新的ID和新的类，但仍然没有遵循它们。

HTML代码<a id="epLogin" href="#" class="pLogin" > GET ON TOP! </a> <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;
}

Answer 1

除了将元素的属性设置为特定值之外，您不能阻止元素从其父元素继承属性。

您可以从选择器中排除一个元素，但随后必须对该选择器的每个变体进行此操作：

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