CSS not:first-child 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12289853/
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
not:first-child selector
提问by Oto Shavadze
I have a divtag containing several ultags.
我有一个div包含多个ul标签的标签。
I'm able to set CSS properties for the first ultag only:
我ul只能为第一个标签设置 CSS 属性：
div ul:first-child {
background-color: #900;
}
However, my following attempts to set CSS properties for each other ultag except the first one don't work:
但是，我的以下尝试为每个其他ul标签设置 CSS 属性（第一个除外）不起作用：
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
How can I write in CSS: "each element, except the first"?
如何在 CSS 中编写：“每个元素，除了第一个”？
回答by Jon
One of the versions you posted actually worksfor all modern browsers (where CSS selectors level 3are supported):
一个您发布的版本的实际工作为所有现代浏览器（如CSS选择3级的支持）：
div ul:not(:first-child) {
background-color: #900;
}
If you need to support legacy browsers, or if you are hindered by the :notselector's limitation(it only accepts a simple selectoras an argument) then you can use another technique:
如果您需要支持旧版浏览器，或者您受到:not选择器的限制（它只接受一个简单的选择器作为参数），那么您可以使用另一种技术：
Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:
定义一个范围比您想要的更大的规则，然后有条件地“撤销”它，将其范围限制在您想要的范围内：
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
When limiting the scope use the default valuefor each CSS attribute that you are setting.
限制范围时，请为您设置的每个 CSS 属性使用默认值。
回答by Alex Quinn
This CSS2 solution ("any ulafter another ul") works, too, and is supported by more browsers.
这个 CSS2 解决方案（“一个ul接一个ul”）也有效，并且得到更多浏览器的支持。
div ul + ul {
background-color: #900;
}
Unlike :notand :nth-sibling, the adjacent sibling selectoris supported by IE7+.
与:notand不同:nth-sibling，IE7+ 支持相邻同级选择器。
If you have JavaScriptchanges these properties after the page loads, you should look at some known bugs in the IE7and IE8implementations of this. See this link.
如果您在页面加载后让JavaScript更改了这些属性，您应该查看IE7和IE8实现中的一些已知错误。 请参阅此链接。
For any static web page, this should work perfectly.
对于任何静态网页，这应该可以完美运行。
回答by ed1nh0
Since :notis not accepted by IE6-8, I would suggest you this:
由于IE6-8:not不接受，我建议您这样做：
div ul:nth-child(n+2) {
background-color: #900;
}
So you pick every ulin its parent element except the first one.
所以你ul在它的父元素中选择除了第一个之外的所有元素。
Refer to Chris Coyer's "Useful :nth-child Recipes"article for more nth-childexamples.
有关更多示例，请参阅 Chris Coyer 的“有用的 :nth-child 食谱”文章。nth-child
回答by zloctb
div li~li {
color: red;
}
Supports IE7
支持IE7
回答by Vinny Troia
not(:first-child)does not seem to work anymore. At least with the more recent versions of Chrome and Firefox.
not(:first-child)似乎不再起作用了。至少对于较新版本的 Chrome 和 Firefox。
Instead, try this:
相反，试试这个：
ul:not(:first-of-type) {}
回答by Vinny Troia
You can use any selector with not
您可以使用任何选择器 not
p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
回答by Nasser Ali Karimi
You can use your selector with :notlike bellow you can use any selector inside the :not()
你可以:not像下面这样使用你的选择器，你可以在里面使用任何选择器:not()
any_CSS_selector:not(any_other_CSS_selector){
/*YOUR STYLE*/
}
you can use
:notwithout parent selector as well.
您也可以在
:not没有父选择器的情况下使用。
:not(:nth-child(2)){
/*YOUR STYLE*/
}
More examples
更多例子
any_CSS_selector:not(:first-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
/*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
/*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
/*YOUR STYLE*/
}
回答by newtron54
I didn't have luck with some of the above,
我对上面的一些没有运气，
This was the only one that actually worked for me
这是唯一真正对我有用的
ul:not(:first-of-type) {}
ul:not(:first-of-type) {}
This worked for me when I was trying to have the first button displayed on the page not be effected by a margin-left option.
当我试图让页面上显示的第一个按钮不受左边距选项的影响时，这对我有用。
this was the option I tried first but it didn't work
这是我首先尝试的选项，但没有用
ul:not(:first-child)
ul:not(:first-child)
回答by Gufran Hasan
As I used ul:not(:first-child)is a perfect solution.
正如我所用的ul:not(:first-child)是一个完美的解决方案。
div ul:not(:first-child) {
background-color: #900;
}
Why is this a perfect because by using ul:not(:first-child), we can apply CSS on inner elements. Like li, img, span, atags etc.
为什么这是完美的，因为通过使用ul:not(:first-child)，我们可以在内部元素上应用 CSS。比如li, img, span, a标签等。
But when used others solutions:
但是当使用其他解决方案时：
div ul + ul {
background-color: #900;
}
and
和
div li~li {
color: red;
}
and
和
ul:not(:first-of-type) {}
and
和
div ul:nth-child(n+2) {
background-color: #900;
}
These restrict only ul level CSS. Suppose we cannot apply CSS on lias `div ul + ul li'.
这些仅限制 ul 级别的 CSS。假设我们不能将 CSS 应用li为 `div ul + ul li'。
For inner level elements the first Solution works perfectly.
对于内层元素，第一个解决方案非常有效。
div ul:not(:first-child) li{
background-color: #900;
}
and so on ...
等等 ...
