Звучит так, как будто у вас JavaScript работает нормально, как есть, но это всего лишь проблема со спецификой ваших правил CSS , поэтому !important заставляет его работать.
Вам просто нужно сделать свои выделенные правила CSS более конкретными, чем невыделенные правила.
#someItem ul li { /* Specificity = 102 */
border-color: white;
}
.highlight { /* Specificity = 10 -- not specific enough! */
border-color: grey;
}
#someItem ul li.highlight { /* Specificity = 112 -- this will work */
border-color: grey;
}
Изменить с дальнейшими пояснениями:
Допустим, соответствующие части вашего HTML выглядят так:
<div id="someItem">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
и у вас есть этот CSS:
#someItem ul li {
border: 1px solid white;
}
.highlight {
border-color: grey;
}
В настоящее время все элементы списка в ul в #someItem div будут иметь белую рамку, и ничто не имеет класса highlight, поэтому ничто не серое.
С помощью любых средств, которые вы хотите (в вашем случае, при наведении курсора в jQuery), вы добавляете класс к одному из элементов:
$(this).addClass('highlight');
HTML-код теперь будет выглядеть примерно так:
<div id="someItem">
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
</div>
Пока ваш Javascript и HTML работают нормально, но вы не видите серую рамку! Проблема в вашем CSS. Когда браузер пытается решить, как стилизовать элемент, он просматривает все различные селекторы, которые нацелены на элемент, и стили, определенные в этих селекторах. Если есть два разных селектора, каждый из которых определяет один и тот же стиль (в нашем случае цвет границы оспаривается), то он должен решить, какой стиль применить, а какой игнорировать. Это делается с помощью того, что известно как «Специфичность», то есть насколько специфичен селектор. Как указано в статье HTML Dog , он делает это, присваивая значение каждой части вашего селектора, и выигрывает тот, кто набрал наибольшее количество очков. Очки:
- селектор элемента (например: "ul", "li", "table") = 1 балл
- селектор класса (например: ".highlight", ".active", ".menu") = 10 баллов
- селектор идентификатора (например: "#someItem", "#mainContent") = 100 баллов
Есть еще несколько правил, например: ключевое слово !important, а также встроенные стили, но это в основном не имеет значения для этого, э-э ... "урок". Единственное, что вы должны знать, это то, что если два селектора имеют одинаковую специфичность, то победит тот, который определен в файле позже.
Возвращаясь к вашей проблеме, учитывая CSS, который у нас был раньше, мы можем понять, почему у него все еще нет серой границы:
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points
Как упоминалось ранее, решение заключается в создании более конкретного селектора:
#someItem ul li.highlight
= id + element + element + class
= 100 + 1 + 1 + 10
= 112 points
И чтобы ответить на ваш вопрос в комментариях, вам не нужно менять какой-либо ваш JavaScript или HTML, чтобы это работало. Если вы сломаете этот селектор, он скажет:
Найдите элемент с идентификатором "someItem", внутри которого ищите элемент ul, а затем элемент li с классом "highlight".
... и теперь, с учетом простого вызова .addClass(), который вы сделали ранее, li удовлетворяет этим условиям, поэтому граница должна стать серой.