css ：not(：first-child)和：not(：first-of-type)不工作

mrwjdhj3 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(286)

我有一个树形系统。我想做的是给所有的父节点留出一个空白，除了第一个。这是我的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/

css

来源：https://stackoverflow.com/questions/34018408/notfirst-child-and-notfirst-of-type-not-working

2条答案

按热度按时间

jv4diomz1#

因为他们不是兄弟姐妹。
如果将：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>

请注意，这根本行不通：

#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=other>Other class element won't work.</div>
        <div class="someContainer">
            <div id="someItem" class="someItemClass">
                Test
            </div>
        </div>
        <div class="someContainer">
            <div id="someItem2" class="someItemClass">
                Test2
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-04-13

qmelpv7a2#

正如我上面的Edd所建议的，它们不是兄弟姐妹-所以你需要将选择器更改为父（.someContainer）。
但我也建议另一种方法，“积极”方法-设置选择器的第一个孩子没有想要的属性，而所有其他孩子都有它

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

.someContainer {
   margin-top: 50px
}

附加Pen

赞(0）回复(0）举报 2023-04-13

我来回答

css ：not(：first-child)和：not(：first-of-type)不工作

2条答案

相关问题

热门标签

最新问答