Я могу переопределить #id поведение лития ул. с определением класса
У меня есть область, которая определяется #id и существует CSS как:
#id ul li {
margin:0;
}
могу я, для определенной УЛ. в той области, переопределять установку поля? Я понимаю, что #id создает очень высокий приоритет в оценке форматирования.
Я попробовал:
.myclass ul li {
margin-left: 20px;
}
и
#id ul.myclass {
а также
#id li.myclass {
Это даже возможно?
4 ответа
Я согласен с SWilk, избегайте !important, если это возможно (а здесь это возможно). Некоторые другие решения, которые не предложил SWilk:
#id ul.myclass li {
или...
#id ul li.myclass {
Ключевым моментом является повышение специфичности селектора, что и делают приведенные выше решения и решения SWilk. Причина, по которой ваши оригинальные решения не работают, заключается в том, что вы не включили другой тег (ul или li) или #id с добавлением .myclass.
Добавлено после вашего комментария, показывающего структуру:
Если ваш html такой (как вы указали в своем комментарии):
<div id="ja-col2">
<div>....
<ul class="latestnews">
<li class="latestnews">
А ваш текущий css такой (как указано в другом комментарии):
#ja-col1 ul li,
#ja-col2 ul li {
margin:0; padding-left:15px;
}
#ja-col2 .latestnews ul li, /*does not exist*/
.latestnews #ja-col2 ul li, /*does not exist*/
.latestnews ul li, /*does not exist*/
ul.latestnews li.latestnews {
list-style:disc outside url("../images/bullet.gif");
margin-left:15px; padding-left:15px;
}
ul li { line-height:180%; margin-left:30px; }
Причина, по которой вы не видите изменений, в том, что три пути селектора не существуют в вашей структуре html, и тот, который выигрывает по специфичности, это самая первая группа. Вам нужно:
#ja-col2 ul.latestnews li
Переопределить #ja-col2 ul li.
Избегайте использования !important. Это трудно отладить и велика вероятность, что это будет мешать другим селекторам. Особенно если вы попытаетесь изменить css через несколько месяцев, когда вы забудете, что в каком-то месте был пункт !important.
Вам нужно поставить более конкретный селектор, чем предыдущий. Просто используйте части class и id в одном селекторе.
Попробуйте использовать
#id .myclass ul li {
margin-left: 20px;
}
или
.myclass #id ul li {
margin-left: 20px;
}
в зависимости от того, где в DOM-дереве находится элемент с классом "myclass" - если он является родителем элемента #id, используйте первый пример, иначе второй. Если вы хотите быть независимым от элемента #id, попробуйте использовать:
#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
margin-left: 20px;
}
Это будет работать для всех li's внутри ul внутри элемента .myclass, и не будет иметь значения, есть ли в дереве элемент #id.
С наилучшими пожеланиями, SWilk
.myclass ul li {
margin-left: 20px !important;
}
Должен помочь :)
http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override
Чтобы пользователи могли управлять стилями, CSS2 изменяет семантику оператора «! Important», определенного в CSS1. В CSS1 последнее слово всегда оставалось за авторами. В CSS2, если таблица стилей пользователя содержит "! Important", она имеет приоритет над любым применимым правилом в таблице стилей автора. Это важная функция для пользователей, которые требуют или должны избегать определенных цветовых комбинаций или контрастов, пользователей, которым требуются большие шрифты и т. Д. Например, следующее правило определяет большой размер шрифта для текста абзаца и отменяет правило автора, равное по весу:
P { font-size: 24pt ! important }