:not(:first-child)和:not(:first-of-type)不起作用 [英] :not(:first-child) and :not(:first-of-type) not working

问题描述

我有点像树系统.我想做的是给所有父母一个保证金，除了第一个.这是我的HTML:

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:

<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>

我的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;
}

现在，我的 .someContainer 具有背景色，但是第二个 .someContainer 没有上边距.如果删除:first-of-type ，它会起作用.:first-child 也不起作用.

Now, my .someContainer has got the background color but the 2nd .someContainer doesn't have a top margin. If I remove the :first-of-type it works. :first-child doesn't work either.

这是我的jsfiddles:

Here's my jsfiddles:

使用 first-of-type : http://jsfiddle.net/JoshB1997/zsu2o3cg/

带有第一个孩子: http://jsfiddle.net/JoshB1997/zsu2o3cg/1/

推荐答案

那是因为它们不是兄弟姐妹.

That's because they are not siblings.

如果将:not选择器更改为父div，它将起作用.

If you change the :not selector to the parent div, it will work.

.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>

这篇关于:not(:first-child)和:not(:first-of-type)不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！