Могу ли я переопределить поведение #id ul li с определением класса

У меня есть область, идентифицируемая #id, и есть CSS:

#id ul li {
    margin:0;
}

Могу ли я, для конкретного UL в этой области, переопределить настройку маржи? Я понимаю, что #id создает очень высокий приоритет при оценке форматирования.

Я пробовал:

.myclass ul li {
    margin-left: 20px;
}

и

#id ul.myclass {

а также

#id li.myclass {

Возможно ли это?

ОТВЕТЫ

Ответ 1

Я согласен с 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.

Ответ 2

.myclass ul li {
    margin-left: 20px !important;
}

Должен сделать трюк:)

Ответ 3

Избегайте использования! important. Это трудно отладить и очень вероятно, что он будет мешать другим селекторам. Особенно, если вы попытаетесь изменить css через несколько месяцев, когда вы забудете, в каком-то месте была важная статья.

Вам нужно поставить более конкретный селектор, чем предыдущий. Просто используйте классы и идентификаторы в одном селекторе.

Попробуйте использовать

#id .myclass ul li {
    margin-left: 20px;
}

или

.myclass #id  ul li {
    margin-left: 20px;
}

в зависимости от того, где элемент с классом "myclass" находится в дереве DOM - если он является родителем элемента #id, используйте первый пример, иначе второй. Если вы хотите быть независимым от элемента #id, попробуйте использовать:

#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
    margin-left: 20px;
}

Это будет работать для всех li внутри ul внутри элемента .myclass, и не имеет значения, есть ли какой-нибудь элемент #id в дереве.

С уважением, SWilk

Ответ 4

http://www.w3.org/TR/WCAG10-CSS-TECHS/#user-override

Чтобы гарантировать, что пользователи могут управлять стилями, CSS2 изменяет семантику оператора "! important", определенного в CSS1. В CSS1 авторы всегда высказывали свое мнение о стилях. В CSS2, если таблица стиля пользователя содержит "! Important", она имеет приоритет над любым применимым правилом в листе стилей автора. Это важная функция для пользователей, которые требуют или должны избегать определенных комбинаций цветов или контрастов, пользователей, которым требуются большие шрифты и т.д. Например, следующее правило определяет большой размер шрифта для текста абзаца и отменяет правило автора равного веса:

P { font-size: 24pt ! important }