Два класса CSS: какой из них выигрывает?

Разметка ниже выравнивает SAMPLE TEXT влево.

Мне кажется, что он должен быть выровнен справа. Класс, который выравнивается справа, объявляется после выравнивания слева. И класс, который выравнивается справа, даже упоминается последним. Итак, почему класс, который выравнивается слева, выигрывает?

CSS

.table {
    width: 100%;
}
.table td {
    text-align: left;
}
.cell {
    text-align: right;
}

HTML

<table class="table">
    <tr>
        <td class="cell">
             SAMPLE TEXT
        </td>
    </tr>
</table>​

См. мой пример jsFiddle.

ОТВЕТЫ

Ответ 1

Селектор .table td имеет более высокий specificity. Правила специфики CSS - это странные... Идентификаторы весит больше, чем имена классов, которые весят больше, чем имена тегов.

Правила специфичности, в двух словах:

  • Для каждого имени тега добавьте 1.
  • Для каждого имени класса добавьте 10.
  • Для каждого идентификатора добавьте 100.

Более высокие значения всегда будут переопределять нижние. В случае галстука последнее загруженное правило выигрывает.

Ответ 2

Я настоятельно рекомендую прочитать фактическую спецификацию CSS по специфике.

Существует четыре уровня:

  • встроенные стили, !important (a)
  • Идентификаторы (b)
  • классы, псевдоклассы, селектора атрибутов (c)
  • псевдоэлементы (d)

Для каждого селектора добавьте в него соответствующую категорию букв:

#foo.bar baz -> a=0, b=1, c=1, d=1
#fizz#buzz   -> a=0, b=2, c=0, d=0

a trumps b trumps c trumps d.

Если есть ничья, выигрывает вторая:

#foo #bar baz
#fizz #buzz baz  <-- same specificity, this one wins

Ответ 3

стили text-align на .table td победят text-align, примененные cell

.table td специфичность (1-1):

(селектор 10 x 1) + (1 x 1 элемент селектора)

. Специфичность соты равна (1-0):

(селектор 10 x 1)

для .cell, чтобы выиграть, он должен иметь определенность выше других. Он также может быть равен другим, но он должен быть объявлен после других уровней того же уровня.

подробнее о наследовании и специфике

Ответ 4

Если вы делаете

.table {
    width: 100%;
}
.table td {
    text-align: left;
    color: Yellow;
    background-color: Red;
}
td.cell {
    text-align: right;
}

он будет выравниваться вправо http://jsfiddle.net/VTrEE/4/