Приоритет CSS

Моя веб-страница содержит:

  td { padding-left:10px; }  

Ссылка на таблицу стилей содержит:

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

У меня есть таблица в идентификаторе rightcolumn где я хочу, чтобы ячейки имели небольшое дополнение. Однако ссылочная таблица стилей имеет приоритет над встроенным стилем. Я вижу это визуально, а также через Firebug. Если я отключу команду padding:0 в Firebug, эффект padding-left вступит в силу.

Как я могу заставить padding-left работать?

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

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

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

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

Здесь находятся правила CSS 2.1 . Этими правилами являются:

  • count 1, если объявление является атрибутом «style», а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута стиля «style» являются правилами таблицы стилей. В этих правилах нет селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
  • подсчитайте количество атрибутов идентификатора в селекторе (= b)
  • подсчитайте количество других атрибутов и псевдоclassов в селекторе (= c)
  • подсчитайте количество имен элементов и псевдоэлементов в селекторе (= d)

Конкатенация четырех чисел abcd (в числовой системе с большой базой) дает специфику.

Поэтому в вашем случае у вас есть два правила:

 .rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/ td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */ 

0001 ниже 0010, и, таким образом, выигрывает первое правило.

Есть два способа исправить это:

  1. Используйте !important сделать правило более «важным». Я бы избегал этого, потому что это путано, когда у вас много правил, распространяемых по нескольким файлам.
  2. Используйте селектор с более высокой степенью точности для td, который вы хотите изменить. Вы можете добавить к нему имя classа или идентификатор, и это позволит вам заменить правило из связанного файла CSS.

Пример:

  

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

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

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

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

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

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

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

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

например

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

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

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

Сделай это:

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

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

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

Пример:

  

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

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

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

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

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

(этот код подходит для html drag and drop, поэтому есть javascript, применяющий class «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 
blahblah
blahblah
 1.div p.bio {font-size: 14px} #sidebar p {font-size: 12px} 

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

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

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

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

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

  • Фоновое изображение для выбора (выпадающее меню) не работает в Chrome
  • Установите непрозрачность фонового изображения, не затрагивая дочерние элементы.
  • Как определить неиспользуемые определения css
  • Каков наилучший способ организации правил CSS?
  • Bootstrap 3 Collapse показать состояние с символом Chevron
  • Амперсанд (&) в конце и часть селектора в SASS
  • Почему «переполнение: авто» очищает всплывающие windows? И почему нужны чистые поплавки?
  • "Text-align: justify;" элементы встроенного блока правильно?
  • CSS-таргетинг на белую страницу, отображаемую Chrome в течение секунды секунды при загрузке
  • Скрытие полосы прокрутки на странице HTML
  • Градиенты в Internet Explorer 9
  • Давайте будем гением компьютера.