CSS 使用类更改列表项背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4983713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Change List Item Background Color with Class
提问by
I am trying to change the background color of one list item while there is another background color for other list items.
我正在尝试更改一个列表项的背景颜色，而其他列表项有另一种背景颜色。
This is what I have:
这就是我所拥有的：
<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>What this produces is all list items with a blue background (from the "nav" class), as if there were no "selected" class. However, when I take out the background color from the "nav" class, I get the red background for the list item with the "selected" class.
这产生的是所有具有蓝色背景的列表项（来自“nav”类），就好像没有“selected”类一样。但是，当我从“nav”类中取出背景颜色时，我会得到带有“selected”类的列表项的红色背景。
I would like to use the "selected" class for other items on the page (i.e. other list items, divs, etc.).
我想将“选定”类用于页面上的其他项目（即其他列表项目、div 等）。
How would I go about solving this?
我将如何解决这个问题？
Thank you in advance.
先感谢您。
回答by
This is an issue of selector specificity. (The selector .selectedis lessspecific than ul.nav li.)
这是选择器特异性的问题。（选择器.selected是以下比特定ul.nav li）。
To fix, use as much specificity in the overriding rule as in the original:
要修复，请在覆盖规则中使用与原始规则一样多的特异性：
ul.nav li {
background-color:blue;
}
ul.nav li.selected {
background-color:red;
}
You might also consider nixing the ul, unless there will be other .navs. So:
您也可以考虑ul取消 ，除非会有其他.navs。所以：
.nav li {
background-color:blue;
}
.nav li.selected {
background-color:red;
}
That's a bit cleaner, less typing, and fewer bits.
这更干净一点，打字更少，位也更少。
回答by Fernando Diaz Garrido
The ul.nav li is more restrictive and so takes precedence, try this:
ul.nav li 更具限制性，因此优先，试试这个：
ul.nav li.selected {
background-color:red;
}
回答by Goldfish
Scenario:
I have a navigation menu like this. Note: Link <a> is child of list item <li>. I wanted to change the background of the selected list item and remove the background color of unselected list item.
场景：我有一个这样的导航菜单。注：链接<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>
I tried to add a class .active into the list item using jQuery but it was not working
我尝试使用 jQuery 在列表项中添加一个类 .active 但它不起作用
.active
{
background-color: #480048;
}
$("nav li a").click(function () {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
});
Solution:
Basically, using .active class changing the background-color of list item does not work. So I changed the css class name from .active to "nav li.active a" so using the same javascript it will add the .active class into the selected list item. Now if the list item <li>has .active class then css will change the background color of the child of that list item <a>.
解决方案：基本上，使用 .active 类更改列表项的背景颜色不起作用。因此，我将 css 类名称从 .active 更改为“nav li.active a”，以便使用相同的 javascript 将 .active 类添加到选定的列表项中。现在，如果列表项<li>具有 .active 类，那么 css 将更改该列表项的子项的背景颜色<a>.
nav li.active a
{
background-color: #480048;
}
回答by Myles Gray
If you want this to be highlighted depending upon the page your user is on then do this:
如果您希望根据用户所在的页面突出显示它，请执行以下操作：
To auto-highlight your current navigation, first label your body tags with an ID or class that matches the section of the site (usually a directory) that the page is in.
要自动突出显示当前导航，请首先使用与页面所在站点部分（通常是目录）相匹配的 ID 或类来标记正文标签。
<body class="ab">
We label all files in the "/about/" directory with the "ab" class. Note that we use a class here to label the body tags. We found that using an ID in the body did not work consistently in some older browsers. Next we label our menu items so we can target them individually thus:
我们用“ab”类标记“/about/”目录中的所有文件。请注意，我们在这里使用一个类来标记正文标签。我们发现在正文中使用 ID 在某些较旧的浏览器中无法始终如一地工作。接下来，我们标记我们的菜单项，以便我们可以单独定位它们：
<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>
Note that we use the "b"utton class to label menu items as buttons and an ID ("ab") to label each unique menu item (in this case about). Now all we need is a CSS selector that matches up the body label with the appropriate menu label like this:
请注意，我们使用“b”按钮类将菜单项标记为按钮，并使用 ID（“ab”）标记每个唯一的菜单项（在本例中为 about）。现在我们只需要一个 CSS 选择器，将 body 标签与适当的菜单标签相匹配，如下所示：
body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}
This code effectively highlights the "About" menu item and makes it appear dark gray. When you label the rest of the site and menu items, you'll end up with a grouped selector that looks something like this:
此代码有效地突出显示了“关于”菜单项并使其显示为深灰色。当您标记站点和菜单项的其余部分时，您最终会得到一个分组选择器，如下所示：
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;}
For example when the user navigates to the sitemap section the .sm classed body tag matches the #sm menu option and triggers the CSS highlight of the "Sitemap" in the navigation bar.
例如，当用户导航到站点地图部分时，.sm 分类的 body 标签匹配 #sm 菜单选项并触发导航栏中“站点地图”的 CSS 突出显示。
回答by DigitalDan
1) You can use the !importantrule, like this:
1）您可以使用!important规则，如下所示：
.selected
{
background-color:red !important;
}
See http://www.w3.org/TR/CSS2/cascade.html#important-rulesfor more info.
有关更多信息，请参阅http://www.w3.org/TR/CSS2/cascade.html#important-rules。
2) In your example you can also get the red background by using ul.nav li.selectedinstead of just .selected. This makes the selector more specific.
2）在您的示例中，您还可以通过使用ul.nav li.selected而不仅仅是.selected. 这使得选择器更加具体。
See http://www.w3.org/TR/CSS2/cascade.html#specificityfor more info.
有关更多信息，请参阅http://www.w3.org/TR/CSS2/cascade.html#specificity。
