Список изменений в CSS. Цвет фона с классом

Я пытаюсь изменить цвет фона одного элемента списка, пока есть другой цвет фона для других элементов списка.

Это то, что у меня есть:

<style type="text/css">

ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}


.selected
{
  background-color:red;
}

</style>


<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

Это создает все элементы списка с синим фоном (из класса "nav" ), как будто не было "выбранного" класса. Однако, когда я беру цвет фона из класса "nav", я получаю красный фон для элемента списка с "выбранным" классом.

Я хотел бы использовать класс "selected" для других элементов на странице (т.е. другие элементы списка, divs и т.д.).

Как мне решить это?

Спасибо заранее.

Ответ 1

Это проблема специфичность селектора. (Селектор .selected менее специфичен, чем ul.nav li.)

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

ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

Вы также можете рассмотреть nixing ul, если не будут другие .nav s. Итак:

.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}

Это немного чище, меньше набирается и меньше бит.

Ответ 2

ul.nav li более ограничительный и имеет приоритет, попробуйте следующее:

ul.nav li.selected {  
  background-color:red; 
}

Ответ 3

Live Demo

Если вы хотите, чтобы это было подсвечено в зависимости от того, на какой странице находится ваш пользователь, выполните следующие действия:

Чтобы автоматически выделить текущий навигация, сначала назовите теги тела с идентификатором или классом, который соответствует раздел сайта (обычно каталог), на котором находится страница.

<body class="ab">

Мы помещаем все файлы в "/about/" каталог с классом "ab". Заметка что мы используем класс здесь для обозначения теги тела. Мы обнаружили, что использование идентификатора в организме не работали последовательно в некоторых старых браузерах. Затем мы маркируем наши пункты меню, чтобы мы могли нацелить их индивидуально таким образом:

<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>

Обратите внимание, что мы используем класс "b" utton для обозначить пункты меню как кнопки и идентификатор ( "ab" ) для обозначения каждого уникального пункта меню (в данном случае около). Теперь все, что нам нужно является селектором CSS, который соответствует ярлык тела с соответствующим меню наклейте вот так:

body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}

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

body.hm #n #hm, body.hm #n #hm a,
body.sm #n #sm, body.sm #n #sm a,
body.is #n #is, body.is #n #is a,
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct
a{color:#333;background:#dcdcdc;text-decoration:none;}

Например, когда пользователь переходит к раздел sitemap.sm classed тег body соответствует опции меню #sm и запускает подсветку CSS в "Карта сайта" в панели навигации.

Источник

Ответ 4

Сценарий: У меня есть меню навигации, подобное этому. Примечание: Ссылка <a> is child of list item <li>. Я хотел изменить фон выбранного элемента списка и удалить цвет фона элемента невыделенного списка.

<nav>
        <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
        </ul>
        <div class="clear"></div>

       </nav>

Я попытался добавить класс. active в элемент списка с помощью jQuery, но он не работал

.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });

Решение: В принципе, использование .active класса, изменяющего фоновый цвет элемента списка, не работает. Поэтому я изменил имя класса css с .active на "nav li.active a", поэтому используя тот же javascript, он добавит класс .active в выбранный элемент списка. Теперь, если элемент списка <li> имеет .active класс, тогда css изменит цвет фона для дочернего элемента этого списка <a>.

nav li.active a
{
    background-color: #480048;
}

Ответ 5

1) Вы можете использовать правило !important, например:

.selected
{
  background-color:red !important;
}

Подробнее см. http://www.w3.org/TR/CSS2/cascade.html#important-rules.

2) В вашем примере вы также можете получить красный фон, используя ul.nav li.selected, а не только .selected. Это делает селектор более конкретным.

Подробнее см. http://www.w3.org/TR/CSS2/cascade.html#specificity.