嵌套选择器中的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”类的元素中获取链接，而最后一个只获取具有“black”类的任何元素。

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

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

OR

.black{
  color:#000 !important;
}

其中'important'会覆盖其他赋予“black”类的元素的规则。

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

正如其他人所提到的，它是白色的，因为你之前的“a”标签选择器比你的“黑色”类更具体。

这里有两个选项：

更具体：

.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>

或者，您可以使用“！important”规则：

.text a{
color:#FFF;
}


.black{
color:#000!important;
}

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

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

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

迈克尔。