Question

我多年来一直在制作网站，而且这些网站真的让我感到烦恼并让我感到困惑。

我在css文件中为我网站中的内容div设置了一个链接样式，这样就成功地为链接设置了样式。

然而，如果我使用新的链接样式在div中创建span或div，我最终必须将!important添加到各种属性中，我只能通过反复试验来判断。

有什么方法可以解决这个问题，还是我做错了什么？

由于

Answer 1

我的直觉是你的选择器specificity出了问题。

确保新的链接选择器具有比封闭元素中更高的特异性。通常这意味着使用像div.outerdiv div.innerdiv a.class这样的选择器而不仅仅是a.class等。

例如：

<div class="outer">
   <a class="outerlink" href="#">Outer Link</a>
   <div class="inner">
      <a class="innerlink" href="#">Inner Link</a>
   </div>
</div>

如果你使用这些选择器，你可能会遇到麻烦（取决于css订购等）：

a.outerlink { **css here** }
a.innerlink { **css here** }

即使您使用这些选择器，也无法保证按照您的要求工作：

.outer a.outerlink {}
.inner a.innerlink {}

但是，这些选择器应该最有效，确保您的内部链接覆盖属性：

.outer a.outerlink {}
.outer .inner a.innerlink {}

确保在.innerlink css中指定要覆盖的所有属性。

一旦了解了特异性，power of the darkside将属于您。

Answer 2

我想我知道你指的是什么，我通过在内部span或div css规则之后添加“a”来解决这个问题。我们假设你有一个一般规则：

a
{
    color:white;
}

如果要在div中覆盖此规则，则必须编写

div a
{
    color:yellow;
}

而不仅仅是

div
{
    color:yellow;
}

这是因为链接在div内部，因此第一个规则比链接的第三个规则强。

CSS链接样式问题

2 个答案: