Списка 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 и т. д.).

Как я буду решать это?

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

11
background colors css html-lists

5 ответов

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

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

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

вы также можете рассмотреть возможность удаления ul, если не будет других .navs. Итак:

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

это немного чище, меньше ввода и меньше бит.

16

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

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

Live Demo

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

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

<body class="ab">

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

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

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

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

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

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 тег тела соответствует опции меню #sm и триггеры на CSS изюминка "Карта сайта" в навигационной панели.

источник

1

сценарий: У меня есть навигационное меню. Примечание: Ссылка <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>

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

.active
{
    background-color: #480048;
}

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

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

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

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 для получения дополнительной информации.

0