2

在下面的示例中,链接 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>
4

5 回答 5

3

您的第二个选择器需要比第一个选择器更具体才能覆盖它:

.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>
于 2012-04-18T11:49:15.517 回答
0

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

.black{
  color:#000 !important;
}

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

a {
  color: #fff;
}
.black {
  color: #000;
}
于 2012-04-18T11:50:01.227 回答
0

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

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

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

或者

.black{
  color:#000 !important;
}

其中“重要”覆盖了赋予“黑色”类元素的其他规则。

于 2012-04-18T11:52:16.210 回答
0

这是工作解决方案,您只需将样式应用于带有 id 而不是类的黑色:

.text a{
color:#FFF;
}


#black{
color:#000;
}

<div class="text">
<a href="#">Link 1</a>
<a href="#" id="black">Link 2</a>
</div>
于 2012-04-18T11:54:11.930 回答
0

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

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

迈克尔。

于 2012-04-18T11:55:18.493 回答