Переопределить один класс CSS другим?

Question

У меня есть список с определенным стилем li. Я хочу заменить стиль отдельного элемента, но он не имеет визуального эффекта. Пример:

.myList li {
  background-color: yellow;
}

.foo {
  background-color: green;
}

<ul class='myList'>
  <li>Hello</li>
</ul>

Когда я добавляю элемент в список, к нему правильно применяется стиль .myList li. Сейчас я пытаюсь удалить все стили и применить стиль foo к одному элементу (используя jquery):

$(item).removeClass();
$(item).addClass("foo");

элемент не меняет цвет на зеленый, но при этом сообщается, что для класса установлено значение 'foo':

alert($(item).attr('class'));

поэтому я полагаю, что я не понимаю правила css здесь, похоже, что определение класса li просто отменяет все, что я делаю, однако я хочу, чтобы обратное было верным, я хочу переопределить определение стиля li с помощью foo. Как мы это делаем?

Спасибо

Answer 1

У вас проблемы со спецификой или с тем, что другие языки называют «приоритетом». Учебное пособие Криса Койера по Специфичность может оказаться полезным.

Короче говоря, более конкретный означает более высокий приоритет:

ul.mylist li.foo {
  background-color: green;
}

Где возможно, избегайте !important (как кто-то рекомендует ниже) - это хак, который означает (смутно), что «это правило применяется выше любого другого правила». См. Комментарии Криса в статье о том, как использовать это разумно.

Answer 2

Селектор ".myList li" более специфичен, чем селектор ".foo", поэтому, когда применяются оба правила, элемент будет желтым.Когда вы делаете "$ (item) .removeClass ();"вы удаляете любые имена классов из li, но если ul все еще имеет имя класса "myList", то li все равно получит стили из селектора ".myList li".

Один способ изменитьCSS будет следующим:

.myList li     { background-color: yellow; }
.myList li.foo { background-color: green; }

Тогда ясно, что второе правило более специфично, чем первое.

Answer 3

CSS работает с приоритетами, которые присваиваются различным селекторам на основе системы баллов. Селектор с наибольшим количеством очков «выигрывает» и определяет стиль элемента.

1. Простой селектор (например, p, li, ul, body, ...): 1 балл
2. Класс (например, .foo, ...): 10 баллов
3. Псевдокласс (например: hover,: focus,: active, ...): 10 баллов
4. ID (например, #wrapper, #content, #header, ...): 100 баллов
5. style = "..." (например, style = "color: red"): 1000 баллов

Вы можете использовать атрибут "! Important", чтобы обеспечить наивысший приоритет. Обратите внимание, что IE 6 полностью игнорирует этот атрибут.

Если даже суммированные точки двух стилей равны друг другу, тот, который позже определил, «выигрывает».

Answer 4

Вы можете принудительно переопределить определенный стиль, добавив !important к правилу.

.foo { background-color: green!important; }

Хотя, к удивлению, я не думаю, что IE6 соблюдает его должным образом.

Answer 5

Сам по себе li не имеет класса, поэтому вызов .removeClass() не имеет никакого отношения.

Вы могли бы сделать что-то вроде

$(item).closest('.myList').removeClass()

и это удалит класс myList из всего списка, но это, вероятно, не то, что вы хотите.

Я не проверял это, но что-то вроде

li.foo {background-color: green;}

может помочь браузеру уважать ваши желания.

Я бы посоветовал прочитать удивительный Энди Кларк CSS: Войны специфичности , чтобы полностью понять специфичность CSS

Answer 6

Использование

li.foo { 
  background-color: green; 
}

Answer 7

Не уверен, правильно ли я понимаю, но похоже, что вы правильно добавляете класс в элемент списка, но к элементу по-прежнему применяется стиль ".myList li", поскольку в элементе списка нет класса Удалить. Поэтому оригинальный стиль имеет приоритет.