:not(:first-child) 和 :not(:first-of-type) 不起作用答案

【问题标题】：:not(:first-child) and :not(:first-of-type) not working:not(:first-child) 和 :not(:first-of-type) 不起作用
【发布时间】：2020-11-22 02:07:18
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

很好，它适用于我的示例代码。但是我的主要代码要复杂得多，而且不能简单地工作。我会尝试一些东西，但这肯定有帮助。谢谢您的帮助。 - 编辑：它现在可以正常工作了！

【解决方案2】：

正如我上面的 Edd 所建议的那样，它们不是兄弟姐妹 - 因此您需要将选择器更改为父级 (.someContainer)。

但我还建议另一种方法，“积极”方法 - 将选择器的第一个子项设置为不具有所需属性，其余所有子项都具有它

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

.someContainer {
   margin-top: 50px
}

附Pen

【讨论】：

我同意你的更简单的方法。虽然我个人更喜欢先设置一般属性，然后用更具体的（例如第一个孩子）覆盖。尽管上面的代码由于 CSS 的特殊性而起作用，但覆盖样式是 CSS 的本质（即应用多个相等选择器中的最后一个而不是第一个）。
在某些情况下，这可能是更清洁的解决方案。然而，在其他情况下，它也可能导致更复杂和更难以维护 CSS。一个例子是如果边距需要匹配其他元素，这可能并不总是“0px”。首先，您可能需要找到该值。更重要的是，无论值如何，如果它后来改变了，现在你必须记住在这里也改变它。可以使这些值保持同步（取决于结构）的对代码的一项修改是改用margin: revert;。我也更喜欢@alds 建议将异常放在第二位。