logo标签列表

使用类改变CSS列表项的背景颜色

csscolorsbackgroundhtml-lists
13
我正在尝试更改一个列表项的背景颜色，而其他列表项具有不同的背景颜色。
这是我的代码: 

<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”类的列表项的红色背景。

我想在页面上使用“selected”类（即其他列表项，div等）。

我该如何解决这个问题？

提前感谢您。

5个回答
16
这是一个选择器特异性问题。（选择器.selected比ul.nav li不够具体。）
为了解决该问题，在覆盖规则中使用与原始规则相同的特异性级别。
ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}

除非还有其他.nav，否则您可能还需考虑取消使用ul。因此：

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

这样更简洁，打字量更少，使用的位数更少。

谢谢！我又不知道 specificity（优先级）的事了。这是否意味着如果我为这些元素声明了样式，我就不能有一个类来影响所有子元素？ - user614972
我刚刚发现如上答案中提到的“！important”可以实现这个。使用“！important”有什么不利之处吗？ - user614972
在编程中存在一些权衡。!important是最后的手段：容易被滥用，并且虽然一开始很简单，但长期来看会让你的代码变得复杂。通常的规则是，如果不必使用!important（而且通常确实不必），就不要使用。即使如此，你仍需要注意特异性，因为!important可以被覆盖。只是通常情况下不太清楚何时会被覆盖（这也是选择器特异性的原因之一）。 - user241244
这是一篇关于此主题的好文章：http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/ - user241244
谢谢，D_N。我明白了关于使用“！important”的问题。最终我将“.nav”从“.nav li”中移除了，现在它的行为符合我的期望：让“.selected”类可以被“当前”页面上所有元素选择。 - user614972
2
  • 更为严格的是 ul.nav li，所以请尝试这样做：
ul.nav li.selected {  
  background-color:red; 
}
谢谢！我不知道 specificity。 - user614972
2

场景： 我有一个导航菜单，像这样。注意：链接 <a> 是列表项 <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;
}
1

现场演示

如果您希望根据用户所在的页面来突出显示此内容，则可以执行以下操作：
为了自动突出显示当前导航，首先要使用与站点部分（通常是目录）匹配的ID或类标记标记您的body标签。

为了自动突出显示当前导航，首先要使用与站点部分（通常是目录）匹配的ID或类标记标记您的body标签。

<body class="ab">

我们将"/about/"目录中的所有文件都标记为"ab"类。注意，我们在这里使用类来标记body标签。我们发现，在一些旧版本的浏览器中，使用body内的ID不能保证稳定性。接下来，我们标记菜单项，以便能够按独立的方式进行处理，如下所示：
<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>

请注意，我们使用“按钮”类将菜单项标记为按钮，并使用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突出显示导航栏中的“网站地图”。 来源
谢谢！不过，我觉得你提供的内容有点超出了我的理解范围。我会尝试学习它。 - user614972
0
谢谢！我之前不知道“！important”。 - user614972
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接