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