CSS链接造型问题

Question

我一直在制作网站很多年了，这些东西真的让我感到困惑，并且让我感到困惑。

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

但是，如果我在这个div内创建一个新的链接样式的跨度或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 {} 

然而，这些选择可以很好地工作，以确保您的innerlinks覆盖属性：

.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内，所以第一个规则比第三个链接强。