Question

我有一种树系统。我要做的是给所有父母一个保证金，除了第一个。这是我的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/

使用first-child：http://jsfiddle.net/JoshB1997/zsu2o3cg/1/

Answer 1

那是因为他们不是兄弟姐妹。

如果您将：not选择器更改为父div，它将起作用。

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}

小提琴 - http://jsfiddle.net/ayhpkphw/

Answer 2

按照我上面的Edd的建议，它们不是兄弟姐妹-因此您需要将选择器更改为父级（.someContainer）。

但是我还建议使用另一种方法，即“正”方法-将选择器的第一个子代设置为不具有所需属性，而将其余所有子代设置为具有该属性

.someContainer:first-child {
    margin-top: 0
} 

.someContainer {
   margin-top: 50px
}

已附加Pen

：not（：first-child）和：not（：first-of-type）不工作

2 个答案: