设置第一个列表项样式的 CSS 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4977704/
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 rule to style first list item
提问by sipwiz
I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first liitem. It works if I put style="border-top: none;"inline on the locationMenuTopItem element but I need to do it with a style block.
我正在尝试将 CSS 样式应用于顶部列表项，但无法以所需的方式应用规则。在下面的示例中，我试图删除第一个li项目的顶部边框。如果我将style="border-top: none;"内联放在 locationMenuTopItem 元素上，它会起作用，但我需要使用样式块来完成。
Why is the #locationMenu liblock overruling the #locationMenuTopItemblock?
为什么#locationMenu li区块会否决#locationMenuTopItem区块？
<html>
<head>
<style>
#locationMenu li {
border-top: 1px solid #e1e1e1;
}
#locationMenuTopItem {
border-top: none;
}
</style>
</head>
<body>
<ul id="locationMenu">
<li id="locationMenuTopItem"><a href="#">Top Menu</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Top Menu 2</a></li>
<li><a href="#">Top Menu 3</a></li>
</ul>
</body>
采纳答案by Yi Jiang
Because of CSS specificity- the selector #locationMenu liis more specificthan #locationMenuTopItem. Using #locationMenu #locationMenuTopItemwill work here.
由于CSS特殊性-选择#locationMenu li更具体的比#locationMenuTopItem。使用#locationMenu #locationMenuTopItem将在这里工作。
Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
这是来自 Andy Clarke 的图形指南，它会有所帮助：http: //www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
回答by Quentin
回答by Marnix
This could be a possible answer:
这可能是一个可能的答案：
#locationMenu li,
#locationMenu li:first-child ul li
{
border-top: 1px solid #e1e1e1;
}
#locationMenu li:first-child
{
border-top:none;
}
It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.
这是否决，因为#locationMenu li 比单独的#locationMenuTopItem 更深。连续的语句越多，它就越深。
