Как селектор элемента более специфичен, чем селектор идентификатора? - PullRequest
Новая
       19

Как селектор элемента более специфичен, чем селектор идентификатора?

5 голосов
/ 16 февраля 2012

Как я понимаю, элементы наименее специфичны. (элемент против идентификатора). Пожалуйста, помогите мне понять специфику селекторов в целом. 

<div id="container">
    <div id="firstDiv">FIRST Div inside CONTAINER</div>
    <div id="secondDiv">SECOND Div inside CONTAINER</div>
</div>

body{
    width: 780px;
    margin: 20px auto;
}
#container > div:not(:last-of-type){
    margin-bottom: 0px; /*How its more specific than ID selector below? */
}
#container {
    border: 15px solid orange;
    padding: 10px;
}
#firstDiv{
    margin: 50px; /*This is not taking effect*/
    border: 5px solid blueviolet;
}
#secondDiv{
    border: 5px solid brown;    
}

http://jsfiddle.net/t2RRq/

Ответы [ 2 ]

13 голосов
/ 16 февраля 2012

Чтобы понять специфику CSS, прочитайте Войны специфичности . Также есть удобный справочный лист:

Таким образом, селектор типа #foo будет иметь специфичность 1,0,0, в то время как селектор элемента, подобный p, будет иметь специфичность 0,0,1. Из этих двух селектор идентификаторов «победит», так как 100 больше 1.

Более конкретную (хе) версию, которая также включает в себя псевдоэлементы и псевдоклассы, можно найти здесь: http://www.standardista.com/css3/css-specificity/

2 голосов
/ 16 февраля 2012

При применении правил специфичность селектора рассчитывается путем подсчета всех простых селекторов (связанных любыми комбинаторами), а не только ключевого селектора. Это означает, что вы не просто сравниваете эти два селектора: 

div
#firstDiv

Но вы сравниваете эти два селектора: 

#container > div:not(:last-of-type)
#firstDiv

Здесь первый селектор более конкретен, потому что он имеет:

  • Селектор идентификатора, #container

  • Селектор типа (элемента), div; и

  • Псевдокласс, в данном случае :last-of-type; сам псевдокласс :not() не учитывает специфичность селектора

В то время как второй селектор состоит только из идентификатора. Обратите внимание, что сами комбинаторы, такие как > в первом примере, не учитывают специфичность селектора.

В спецификации селекторов имеется целый раздел, посвященный способам расчета специфичности селектора.

...