CSS特异性混乱

我有以下的标记：CSS特异性混乱

<div class="breadcrumbs"> 
    <span id="links"> 
     <a href="/home.html" class="pointer">home</a> 
     <span>&gt;</span> 
     <a href="/module/users.html">users</a> 
    </span> 
</div>

我的风格是这样定义的：

.breadcrumbs{/*styles for breadcrumbs div*/} 
.breadcrumbs span a{cursor:default/*other styles for breadcrumbs links*/} 

a.pointer{cursor:pointer;}

在我的网页，这些链接显示默认光标（箭头）和风格a.pointer显示在IE10控制台和萤火虫中出现。

我的困惑是，由于pointer类直接应用于anchor元素，难道不应该重写从.breadcrumbs span a中挑选出来的匹配吗？

来源

2013-04-16 TheVillageIdiot

查看http://specificity.keegan.st/，对于可视化特异性非常有用。 – robertklep

不，当然不应该。特异性规则表示，选择器越具体，其优先级越高。所以在你创建一个适用于所有锚定标签的类，然后是另一个适用于某个其他html标签（div）内的锚定标签的类时，第二个类将具有更高的优先级，因为它的更窄定位。

您可以查看Smashing杂志的这篇文章，了解特定规则。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

来源

2013-04-16 06:41:20

很明显'breadcrumbs span a'比'a.pointer'更具体或更详细。 – TheVillageIdiot

CSS特异性混乱

回答

相关问题