Как заставить класс иметь приоритет над идентификатором?
<div id="normal" class="wider">
</div>
Но это не сработает! Ширина blah до отменяет класс "шире" с.
Ответы
Ответ 1
У вас есть проблема спецификация CSS.
.wider
имеет специфичность 0,0,1,0
, а #normal
имеет 0,1,0,0
. Вы не можете бить идентификатор ничем иным, как идентификатором (или встроенными определениями, но здесь это не так).
Что бы я рекомендовал, если вы не можете поместить нужное объявление width
в селектор #normal
, поместить его в #normal.wider
или, если это невозможно, иметь идентифицированный контейнер, например #container
, насколько это возможно в иерархии (возможно, ID на теле?) и заменить .wider
на #container .wider
. Этот новый селектор будет иметь спецификацию 0,1,1,0
, которая немного выше, чем 0,1,0,0
.
Использование !important
тоже будет работать, но оно должно использоваться только в качестве последнего средства.
Пример:
<div id="container" class="wrapper">
<div id="normal" class="wider">
</div>
Для этого фрагмента HTML некоторые возможные селекторы в порядке убывания специфичности:
CSS Selector -> Specificity
---------------------------------------
#container #normal -> 0,2,0,0
#container .wider -> 0,1,1,0 // These two have the same specificity so
#normal.wider -> 0,1,1,0 // the last declared value will be used
#normal -> 0,1,0,0
.wrapper .wider -> 0,0,2,0
.wider -> 0,0,1,0
Ответ 2
используйте # blah.wider вместо этого, чтобы решить эту проблему
Ответ 3
Вы можете украсить атрибуты с помощью !important
, чтобы увеличить их... важность.
.wider
{
width:9000px !important;
}
Ответ 4
Как уже упоминалось, идентификатор имеет спецификацию 100, тогда как класс имеет только 10.
Альтернативой предложенным ответам (не использующим !important
,) является удаление свойства из #normal
, которое конфликтует (ширина) и применяет его ко второму классу. Таким образом, это будет выглядеть так:
#normal {
padding : 0;
margin : 0;
}
.normal {
width : 400px;
}
.wider {
width : 1000px;
}
Оставляя свою фактическую разметку:
<div id="normal" class="normal">
</div>
где вы хотите "нормальную ширину" и:
<div id="normal" class="wider">
</div>
Если вам нужен дополнительный расширенный элемент. Возможно, вам придется вернуться через ваши страницы, которые используют #normal
, чтобы добавить класс .normal
, но это устранит вашу проблему.
Я также думаю, что ответ Gerben тоже работает - добавляет еще 10 специфичность к свойству ID (полностью 110), которое должно переопределить свойство ширины #normal
.
#normal.wider {
1000px;
}
Ответ 5
256 классов CSS могут переопределять #id: http://codepen.io/chriscoyier/pen/lzjqh
Ответ Алина Пуркару объясняет основные правила вычисления приоритета css. Но объяснение реализации можно найти на http://hackerne.ws/item?id=4388649