Html :not(:first-child) 和 :not(:first-of-type) 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34018408/
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) and :not(:first-of-type) not working
提问by Joshua Bakker
I have sort of a tree system. What I'm trying to do is give all the parents a margin except for the first one. This is my HTML:
我有一个树系统。我想做的是给所有的父母一个余量，除了第一个。这是我的 HTML：
<div id="someDivID">
<div class="theBody">
<div class="someContainer">
<div id="someItem" class="someItemClass">
Test
</div>
</div>
<div class="someContainer">
<div id="someItem2" class="someItemClass">
Test2
</div>
</div>
</div>
</div>
And my CSS:
还有我的 CSS：
#someDivID
{
width: 400px;
}
#someItem,
#someItem2
{
border: 1px solid #000;
padding: 1px;
margin-bottom: 2px;
clear: both;
overflow: auto;
}
.someItemClass
{
background-color: #0077FF;
}
.someItemClass:not(:first-of-type)
{
margin-top: 50px;
}
Now, my .someContainerhas got the background color but the 2nd .someContainerdoesn't have a top margin. If I remove the :first-of-typeit works. :first-childdoesn't work either.
现在，我.someContainer有背景颜色，但第二个.someContainer没有上边距。如果我删除:first-of-type它的工作原理。:first-child也不起作用。
Here's my jsfiddles:
这是我的 jsfiddles：
With first-of-type: http://jsfiddle.net/JoshB1997/zsu2o3cg/
与first-of-type：http: //jsfiddle.net/JoshB1997/zsu2o3cg/
With first-child: http://jsfiddle.net/JoshB1997/zsu2o3cg/1/
与first-child：http: //jsfiddle.net/JoshB1997/zsu2o3cg/1/
回答by Edd
That's because they are not siblings.
那是因为他们不是兄弟姐妹。
If you change the :not selector to the parent div, it will work.
如果您将 :not 选择器更改为父 div，它将起作用。
.someContainer:not(:first-of-type)
{
margin-top: 50px;
}
#someDivID
{
width: 400px;
}
#someItem,
#someItem2
{
border: 1px solid #000;
padding: 1px;
margin-bottom: 2px;
clear: both;
overflow: auto;
}
.someContainer
{
background-color: #0077FF;
}
.someContainer:not(:first-of-type)
{
margin-top: 50px;
}<div id="someDivID">
<div class="theBody">
<div class="someContainer">
<div id="someItem" class="someItemClass">
Test
</div>
</div>
<div class="someContainer">
<div id="someItem2" class="someItemClass">
Test2
</div>
</div>
</div>
</div>