Приоритет CSS

Ответ 1

Как уже упоминалось, у вас есть проблема специфичности. При определении того, какое из двух правил должно иметь приоритет, механизм CSS подсчитывает количество #id в каждом селекторе. Если он имеет больше, чем другой, он используется. В противном случае он продолжает сравнивать .class es и tag таким же образом. Здесь у вас есть класс в правиле таблицы стилей, но не в встроенном правиле, поэтому стиль имеет приоритет.

Вы можете переопределить это с помощью !important, но это ужасно большой молот, который будет использоваться здесь. Вам лучше улучшить специфику вашего встроенного правила. Основываясь на вашем описании, кажется, что ваш элемент .rightColumn либо содержит, либо содержит table, и вы хотите, чтобы ячейки в этой таблице имели дополнительный интервал? Если это так, селектор, который вы ищете, это ".rightColumn td", что более конкретно, чем правило таблицы стилей и будет иметь приоритет.

Ответ 2

Большинство ответов верны, говоря, что это проблема специфичности, но являются неправильными или неполными в объяснении правил специфики.

В основном в вашем случае .rightColoumn * является "более конкретным", чем td, и поэтому выигрывает правило, даже если оно приходит раньше.

Правила CSS 2.1 расположены здесь. Этими правилами являются:

• count 1, если объявление является атрибутом 'style', а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута стиля "style" являются правилами таблицы стилей. нет селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
• подсчитать количество атрибутов идентификатора в селекторе (= 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, чтобы сделать правило более "важным". Я бы избегал этого, потому что это запутывает, когда у вас много правил, распространяемых по нескольким файлам.
• Используйте селектор с более высокой степенью точности для td, который вы хотите изменить. Вы можете добавить к нему имя класса или идентификатор, и это позволит вам заменить правило из связанного файла CSS.

Пример:

<style>
  .rightColomn * { padding: 0; } /* 0010 */
  td#myUnpaddedTable { padding: 10px; } /* 0101 */
  td.anUnpaddedTable { padding: 10px; } /* 0011 */ 
</style>

Изменить: Исправлены правила специфичности для *. В комментарии Дэвида мне было предложено перечитать спецификацию, которая показывает, что селектор * ничего не делает для оценки специфики.

Ответ 3

Самый простой способ заставить его работать - добавить "! important" в CSS, чтобы гарантировать его приоритет (если у вас нет нескольких важных правил):

td {
    padding-left: 10px !important;
} 

Если вы ищете ответ без важности, вы должны прочитать в спецификации спецификаций CSS. У связанного сайта есть хорошее объяснение того, как он работает, хотя в основном он идет от самого важного к наименее, с наиболее важными селекторами идентификаторов, селекторами классов и селекторами элементов.

Ответ 4

Попробуйте это вместо:

td.rightColumn * {margin: 0; padding: 0;}

td во внешней таблице стилей более конкретна, поэтому она выигрывает. Если вы квалифицируете класс rightColumn с именем элемента, тогда будут применяться стили уровня страницы.

Ответ 5

Вы можете попробовать добавить! важный флаг для вашего встроенного css.

например.

td {padding-left: 10px! важный; }

Кроме того, для общих правил по упорядочению правил CSS, посмотрите на это:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Ответ 6

Сделайте это:

.rightColumn *,
td.rightColumn * {
  margin: 0;
  padding: 0;
}

Приоритет в CSS выглядит следующим образом:

• Если какое-то правило имеет идентификатор, оно будет предшествовать чему-либо еще.
• Если какое-либо правило имеет атрибут класса, оно будет предшествовать правилам только для тегов.
• Если два правила имеют как идентификаторы, так и теги, то количество их развязывает "бой".

Пример:

<style type="text/css">
  #myid{
    padding: 10px;
  }

  .class{
    padding: 20px;
  }
</style>
<div id="myid" class="class"></div>

Хотя ваш div имеет как ID, так и класс, правило ID переопределяет правило .class.

Чтобы узнать больше о приоритетах правил CSS, я бы рекомендовал http://www.w3.org/TR/CSS2/cascade.html#specificity.

Ответ 7

ok Я признаю, что я немного опаздываю в игру здесь.. но через 3 года я думаю, я все еще могу снимать за это первое место.

дополнительный соус в моем ответе гласит, что есть пример css с 2 уровнями имени класса.

в приведенном ниже примере вы можете увидеть "td" без класса, получившего стиль ".interval td", а td с классом "indragover" получает стиль "table.interval td.indragover".

(этот код подходит для html drag and drop, поэтому некоторые javascript применяют класс "indragover" к td в dragenter, dragleave events)

// put this in a css file
.interval {
    height: 100%;
    width: 100%;
    background: #FFFFCC;
    border: 2px solid #000000;
    border-collapse: collapse;
}

table.interval tr td {
    border: 2px solid black;
    color:#112ABB;
    background: #FFFFCC;
    height: 20px;
}

table.interval td.indragover {
    background: #AAAA00;
}

// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
</table>

Ответ 8

1.div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}

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

An id более специфичен, чем a class, который более специфичен, чем элемент.

2.p {font-size: 12px}
p.bio {font-size: 14px}

Вторая строка CSS (p.bio) более специфична, чем первая, когда речь идет о вашем абзаце class="bio".

уровень приоритета class выше, чем элемент p.