CSS: дочерний селектор имеет более высокий приоритет, чем селектор класса?

Question

У меня есть следующий HTML:

<div class="form-square">
     <div class="seven-col">
        Hello World!
      </div>
</div>

И следующий CSS:

div.form-square > div {
    padding: 50px;
}

.seven-col {
    padding: 0;
}

Firefox и Firebug используют первое из двух правил CSS.Почему «div.form-square> div» имеет более высокий приоритет, чем «.seven-col», что более конкретно?

Answer 1

div.form-square > div состоит из 1 селектора класса + 2 селектора типа (плюс дочерний комбинатор).

.seven-col состоит из 1 селектора класса.

Количество селекторов классов равно, поэтому сравнение выполняется в селекторах типов. Первый селектор имеет больше селекторов типа, поэтому он более конкретен.

Специфичность основана на количестве селекторов каждого типа во всей вещи , а не на части с правой стороны самого правого комбинатора.

(Примечание: в первом примере также есть то, что CSS 2 называет дочерним селектором, но это не учитывает специфику и описывает отношения между элементами, а не особенность элемента, что, вероятно, почему CSS 3 переименовывает его в детский комбинатор).

Answer 2

.seven-col имеет 1 класс = + 1

div.form-square > div имеет 2 элемента и 1 класс = + 3

Проверьте это с помощью калькулятора специфичности CSS: http://www.suzyit.com/tools/specificity.php

Answer 3

Правильно, первое правило более конкретно, чем второе, потому что селектор только для класса имеет довольно низкий приоритет.