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

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

11 голосов
/ 13 февраля 2011

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

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

<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 и т. Д.).

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

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

Ответы [ 5 ]

16 голосов
/ 13 февраля 2011

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

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

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

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

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

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

2 голосов
/ 13 февраля 2011

ul.nav li более ограниченный и поэтому имеет приоритет, попробуйте это: 

ul.nav li.selected {  
  background-color:red; 
}
1 голос
/ 26 февраля 2014

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

Демонстрация в реальном времени

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

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

<body class="ab">

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

<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 соответствует параметру меню #sm и вызывает выделение CSS для «Sitemap» на панели навигации.

Источник

0 голосов
/ 13 февраля 2011

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.

...