Question

我有以下标记：

<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控制台和firebug中。

我的困惑是，当pointer类直接应用于锚元素时，它不应该覆盖从.breadcrumbs span a匹配中选择的那个吗？

Answer 1

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

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

CSS特异性混淆

1 个答案: