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

Question

Разметка ниже выравнивает 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 Пример .

Answer 1

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

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

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

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

Answer 2

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

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

1. inline-styles, !important _(a)
2. ID _(b)
3. классы, псевдоклассы, селекторы атрибутов _(c)
4. element, псевдоэлементы _(d)

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

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

a козыри b козыри c козыри d.

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

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

Answer 3

стилей text-align на .table td выиграют у text-align, примененного cell

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

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

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

(10 х 1 селектор класса)

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

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

Answer 4

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

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

выровняется по правому краю http://jsfiddle.net/VTrEE/4/