在下面的示例中,链接 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>
在下面的示例中,链接 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>
您的第二个选择器需要比第一个选择器更具体才能覆盖它:
.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>
它是白色的,因为前面的选择器具有更高的特异性。一种解决方案:
.black{
color:#000 !important;
}
但是,如果您使用过多,这可能会导致复杂的问题。一般来说,最好的解决方案是尽量避免使用过多的选择器。有一个选择器为链接设置默认样式,然后只使用类来更改特定链接。例如:
a {
color: #fff;
}
.black {
color: #000;
}
结果是白色的,因为第一个选择器更加具体,即:获取具有“text”类的元素中的链接,而最后一个仅获取具有“black”类的任何元素。
您可以通过两种方式解决此问题:
.text a.black {
color:#000;
}
或者
.black{
color:#000 !important;
}
其中“重要”覆盖了赋予“黑色”类元素的其他规则。
这是工作解决方案,您只需将样式应用于带有 id 而不是类的黑色:
.text a{
color:#FFF;
}
#black{
color:#000;
}
<div class="text">
<a href="#">Link 1</a>
<a href="#" id="black">Link 2</a>
</div>
正如其他人所提到的,它是白色的,因为您之前的“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”规则,因为它会在未来搞砸你——相信我!
希望这能回答你的问题。祝你有美好的一天。
迈克尔。