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

我想将“selected”类用于页面上的其他项目（即其他列表项，div等）。

我将如何解决这个问题？

提前谢谢。

Answer 1

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

这有点清洁，打字少，位数少。

Answer 2

ul.nav li限制性更强，因此优先考虑：

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

Answer 3

Live Demo

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

自动突出显示您的当前导航，首先标记您的身体标签具有与之匹配的ID或类网站的一部分（通常是一个该页面所在的目录。

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

<强> Source

Answer 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>

我尝试使用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将更改该列表项{child}的子项的背景颜色

<a>.

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。

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

5 个答案: