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 и firebug.

Моя путаница в том, что, как pointer класса наносится непосредственно на якорь элемента, не должен его переопределить один из .breadcrumbs span a определен матча?

Answer 1

Нет, конечно, этого не должно быть. Правило специфичности говорит, что более конкретный селектор, тем больше у него будет приоритет. Таким образом, в вашем случае, когда вы создали класс, который применяется ко всем привязным тегам, а затем еще один класс, который применяется к тэгам привязки в определенном другом теге html (div), то второй имеет более высокий приоритет, поскольку он уже в своем таргетинг.

Вы можете ознакомиться с этой замечательной статьей из журнала Smashing, чтобы понять правила специфики. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/