Приоритеты класса CSS

У меня есть вопрос о приоритете классов CSS после столкновения с проблемой сегодня. Ситуация такова:

У меня есть неупорядоченный список, у которого есть связанный с ним класс. Теги LI также имеют определенные стили. Я хочу изменить стиль LI после щелчка (через добавленный класс "selected"), но добавленные стили классов никогда не применяются. Это нормальное поведение или этот код работает?

CSS

.dynamicList
{
    list-style: none;
}

.dynamicList li
{
    display: block;
    width: 400px;
    height: 55px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    background-color: #ff0000;
}

.selectedItem
{
    background-color: #0000ff;
}

HTML:

<ul class="dynamicList">
  <li>First Item</li>
  <li class="selectedItem">Second (Selected) Item</li>
</ul>

Цвет фона элемента списка "selected" не изменяется. Это также имеет место, если я не применяю стиль к элементу LI, но создаю другой класс и применяю его ко всем элементам списка, чтобы он читал..

<li class="listitem selectedItem">xxxx</li>

Ответ 1

Это звучит как проблема CSS specificity. Попробуйте изменить свой набор правил .selectedItem на:

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

Ответ 2

Короткий ответ заключается в том, что ваш стиль .selectedItem не применяется, потому что предыдущий стиль более специфичен и, следовательно, имеет более высокий приоритет. Ниже приведено достойное сокращение:

Теперь давайте сделаем общий список внутренние приоритеты для CSS (3 наивысший приоритет):
element
.class
#id
Это порядок приоритетов по умолчанию. В Кроме того, специфика будет также count, f.ex ul li переопределит ли. W3C сделал достойную таблицу за как вы должны рассчитать внутренние вес:
LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */
#list         {...}  /* a=1 b=0 c=0 -> specificity = 100 */

И вот спецификация W3C.

Ответ 3

Измените правило selectedItem на:

.dynamicList li.selectedItem
{
    background-color: #0000ff;
}

Ответ 4

Небольшое дополнение, о котором не упоминалось сообщение cletus.
Согласно ссылке W3C, самым высоким приоритетом является атрибут style, используемый в элементе/теге html.

например. если у вас есть

<a id= bar style="color: red">foo</a>

<style>
#bar {
    color: blue;
}
</style>

Цвет будет red, потому что стиль встроенного html имеет наивысший приоритет, выше #.