Как заставить класс иметь приоритет над идентификатором?

Ответ 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