html - :not(:first-child) and :not(:first-of-type) not working

Question

我有一种树系统。我想做的是给所有 parent 一个 margin ，除了第一个。这是我的 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 也不起作用。

这是我的 jsfiddles:

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

第一个 child :http://jsfiddle.net/JoshB1997/zsu2o3cg/1/

Answer 1

那是因为他们不是 sibling 。

如果将 :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>