css - CSS 特异性混淆

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 控制台和萤火虫中显示样式。

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

Answer 1

不，当然不应该。具体规则说，选择器越具体，它的优先级就越高。因此，在您的情况下，当您创建一个适用于所有锚标记的类，然后创建另一个适用于某个其他 html 标记（div）中的锚标记的类时，第二个类将具有更高的优先级，因为它的范围更窄瞄准。

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