Большинство ответов верны, когда говорят, что это проблема специфичности, но неверны или неполны в объяснении правил специфичности.
В основном в вашем случае .rightColoumn * "более конкретен", чем td, и поэтому правило выигрывает, даже если оно наступает раньше.
Правила CSS 2.1 находятся здесь . Эти правила:
- count 1, если декларация from является атрибутом 'style', а не правилом с селектором, 0 иначе (= a) (В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила имеют селекторов нет, поэтому a = 1, b = 0, c = 0 и d = 0.)
- подсчитать количество атрибутов ID в селекторе (= b)
- подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
- подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)
Конкатенация четырех чисел a-b-c-d (в системе счисления с большой базой) дает специфичность.
Так что в вашем случае у вас есть два правила:
.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */
0001 ниже, чем 0010, и поэтому первое правило выигрывает.
Есть два способа исправить это:
- Используйте
!important, чтобы сделать правило более "важным". Я бы избегал этого, потому что это сбивает с толку, когда у вас много правил, распределенных по нескольким файлам.
- Используйте селектор более высокой специфичности для тд, который вы хотите изменить. Вы можете добавить к нему имя класса или идентификатор, и это позволит вам заменить правило из связанного файла CSS.
Пример:
<style>
.rightColomn * { padding: 0; } /* 0010 */
td#myUnpaddedTable { padding: 10px; } /* 0101 */
td.anUnpaddedTable { padding: 10px; } /* 0011 */
</style>
Редактировать: Исправлены правила специфичности для *. Комментарий Дэвида побудил меня перечитать спецификацию, которая показывает, что селектор * ничего не влияет на оценку специфичности.