Css приоритет стиля – Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили

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

• граф 1 Если объявление От является атрибутом ‘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, и поэтому первое правило выигрывает.

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

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

Пример:

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

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

Поделиться Mr. Shiny and New 安宇     20 марта 2009 в 19:21

19

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

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

Поделиться Ben Blank     20 марта 2009 в 18:17

4

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

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

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

Поделиться Daniel Lew     20 марта 2009 в 17:52

1

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

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

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

Поделиться Andrew Hare     20 марта 2009 в 17:52

1

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

напр.

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

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

http://www.w3.org/TR/CSS2/cascade.html # специфика

Поделиться deanWombourne     20 марта 2009 в 17:53

1

Сделать это:

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

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

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

Пример:

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

  .class{
    padding: 20px;
  }
</style>
<div></div>

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

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

Поделиться Seb     20 марта 2009 в 17:53

1

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

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

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

(этот код поставляется для перетаскивания html, поэтому есть некоторые 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>
<tr><td>blah</td><td>blah</td></tr>
<tr><td>blah</td><td>blah</td></tr>
</table>

Поделиться dancl     01 марта 2012 в 20:26

-1

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 .

Поделиться asim muhammad     29 сентября 2015 в 19:54

.formcontainer input, textarea {
    background-color: lightgray;
}

<div>
    <div>
        <label>Email</label>
        <div>
            <input type="text" fieldrequired>
        </div>
    </div>
    <div>
        <label>Contact Instructions</label>
        <div>
            <textarea type="text" rows="10" cols="15" fieldrequired></textarea>
        </div>
    </div>
</div>

.formcontainer input,
textarea {
  background-color: lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <div>
    <label>Email</label>
    <div>
      <input type="text" fieldrequired>
    </div>
  </div>
  <div>
    <label>Contact Instructions</label>
    <div>
      <textarea type="text" rows="10" cols="15" fieldrequired></textarea>
    </div>
  </div>
</div>

input.form-control,
textarea.form-control {
  background-color: lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <div>
    <label>Email</label>
    <div>
      <input type="text" fieldrequired>
    </div>
  </div>
  <div>
    <label>Contact Instructions</label>
    <div>
      <textarea type="text" rows="10" cols="15" fieldrequired></textarea>
    </div>
  </div>
</div>

.formcontainer input, 
.formcontainer textarea {
    /* whatever */
}

.formcontainer input, 
textarea {
    background-color: lightgray;
}