嵌套选择器中的CSS样式链接颜色

Question

在下面的示例中，链接2出现白色并且不像预期的那样黑色如何设计链接2的颜色而不将其包装到容器标签中？

.text a{ 
color:#FFF; 
} 


.black{ 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

Answer 1

你的第二选择需要比第一个覆盖它更具体：

.text a { 
color:#FFF; 
} 

.text a.black { 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

Answer 2

它散发出来的白色，因为以前选择具有较高specificity。其中一种解决方案如下：

.black{ 
    color:#000 !important; 
} 

但是，如果使用太多，会导致复杂的问题。通常最好的解决方案是尝试并避免太多选择器。有一个选择器为链接设置默认样式，然后仅使用类来更改特定链接。例如：

a { 
    color: #fff; 
} 
.black { 
    color: #000; 
} 

Answer 3

原来的白色，因为第一选择是更具体的，即：获得具有类“文本”的元素的链接，而最后仅得到任何元素与类“黑色”。

您可以通过两种方式解决这个问题：

.text a.black { 
color:#000; 
} 

OR

.black{ 
    color:#000 !important; 
} 

在其中“重要”覆盖其他的规则被给予与类元素“黑”。

Answer 4

这里的工作解决方案，您只需将样式为黑色与ID而不是类：

.text a{ 
color:#FFF; 
} 


#black{ 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" id="black">Link 2</a> 
</div> 

Answer 5

正如其他人所说，它出来的白色，因为您之前的“一个”标签选择器比更具体你的“黑人”班。

有两个选项：

更具体：

.text a{ 
color:#FFF; 
} 


.text a.black { 
color:#000; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

或者，你可以我们的规则 “重要！”：

.text a{ 
color:#FFF; 
} 


.black{ 
color:#000!important; 
} 

<div class="text"> 
<a href="#">Link 1</a> 
<a href="#" class="black">Link 2</a> 
</div> 

我会强烈建议第一的方法，但在某些情况下，“重要的”可以是一个快速的修复，直到你找出真正的问题所在。不要滥用“！重要”规则，因为它会搅乱你的未来 - 请相信我！

希望这回答你的问题。祝你有美好的一天。

Michael。