css - 嵌套选择器中的 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

它是白色的，因为前面的选择器具有更高的特异性。一种解决方案：

.black{
  color:#000 !important;
}

但是，如果您使用过多，这可能会导致复杂的问题。一般来说，最好的解决方案是尽量避免使用过多的选择器。有一个选择器为链接设置默认样式，然后只使用类来更改特定链接。例如：

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

Answer 3

结果是白色的，因为第一个选择器更加具体，即：获取具有“text”类的元素中的链接，而最后一个仅获取具有“black”类的任何元素。

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

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

或者

.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

正如其他人所提到的，它是白色的，因为您之前的“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”规则，因为它会在未来搞砸你——相信我！

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

迈克尔。