CSS更改列表项背景颜色与类

Question

我正在尝试更改一个列表项的背景颜色，而其他列表项有另一种背景颜色。

这就是我所拥有的：

<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”类），就好像没有“selected”类一样。但是，当我从“nav”类中取出背景颜色时，我会得到带有“selected”类的列表项的红色背景。

我想为页面上的其他项目（即其他列表项、div 等）使用“选定”类。

我将如何解决这个问题？

提前谢谢你。

Answer 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 类添加到列表项中，但它不起作用

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

Answer 2

这是selector specificity 的问题。 （选择器.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;
}

这样更简洁，打字更少，位数也更少。

Answer 3

ul.nav li 限制性更强，因此优先，试试这个：

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

Answer 4

Live Demo

---

如果您希望根据用户所在的页面突出显示此内容，请执行以下操作：

自动突出显示您当前的 导航，首先标记你的身体标签 具有与 网站的部分（通常是 目录）页面所在的目录。

<body class="ab">

我们在“/about/”中标记所有文件 带有“ab”类的目录。笔记 我们在这里使用一个类来标记 身体标签。我们发现使用 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;}

这段代码有效地突出了 “关于”菜单项并使其出现 深灰色。当你标记其余的 网站和菜单项，你最终会 带有一个看起来像的分组选择器 像这样：

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 分类的站点地图部分 正文标签与#sm 菜单选项匹配 并触发 CSS 高亮 导航栏中的“站点地图”。

Source

Answer 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 了解更多信息。