it-swarm-ru.tech

Цвет фона элемента списка изменений CSS с помощью класса

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

Вот что у меня есть:

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   
<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. 

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

Как бы я решил это?

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

11
user614972

Это проблема специфичности селектора . (Селектор .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
D_N

Ul.nav li более строг и поэтому имеет приоритет, попробуйте это:

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

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;}

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

Источник

1
Myles Gray

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

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
DigitalDan