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

Question

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

#id ul li {
    margin:0;
}

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

Я пробовал:

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

и

#id ul.myclass {

, а также

#id li.myclass {

Возможно ли это вообще?

Answer 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.

Answer 2

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

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

Answer 3

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

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

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

#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

Answer 4

Использовать псевдо-подделку: не ID

.myclass:not(#f) ul li {
    margin-left: 20px;
}

#hello .hello-in{
  color:red;
}

.hello-in:not(#f){
  color:blue;
}

<div id="hello">
  <div class="hello-in">
   Hello I am red
  </div>
</div>

Вы даже можете использовать :not(#♥) или любой html4 / 5 (зависит от типа страницы) символ

Answer 5

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

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

P { font-size: 24pt ! important }