无法将 CSS 添加到除使用 :not(:last-child) 的类之外的所有类

Question

这是我的 HTML：

<div class="TwoSidesLayout">
    <div class="LeftSide">
        <div class="mainItem">
            <div class="wrap">
                <img class="image" src="...." alt="...">
                <div class="contentbody"></div>
            </div>
        </div>
        <div class="mainItem">
            <div class="wrap">
                <img class="image" src="...." alt="...">
                <div class="contentbody"></div>
            </div>
        </div>
    </div>   
    
    <div class="RightSide">
        <div class="mainItem">
            <div class="wrap">
                <img class="image" src="...." alt="...">
                <div class="contentbody"></div>
            </div>
        </div>
        <div class="mainItem">
            <div class="wrap">
                <img class="image" src="...." alt="...">
                <div class="contentbody"></div>
            </div>
        </div>
    </div>
</div>

我正在尝试将

margin-bottom: 10px

的 CSS 添加到

.mainItem

类中。但是，如果它是

.mainItem

中的最后一个

.LeftSide

类或

.mainItem

中的最后一个

.RightSide

类，那么我只想删除最后一个类中的

margin-bottom: 10px

。

例如，假设

.LeftSide

或

.RightSide

有 100 个

.mainItem

类，最后 100 个

.mainItem

类不应该是

margin-bottom: 10px

。

我以为我可以通过使用

:not(:last-child)

轻松实现此目的，但由于某种原因这不起作用。它不会将

margin-bottom: 10px

添加到任何

.mainItem

中。我认为它将每个

.mainItem

视为最后一个孩子。 这是我尝试过的：

.TwoSidesLayout{
    .LeftSide, .RightSide{
        .mainItem:not(:last-child) {
            margin-bottom: 10px;
        }
    }
}

Answer 1

这不是一个答案，而是一个演示，以表明您的

:not(:last-child)

方法显然有效：

.TwoSidesLayout{
div {border:1px solid grey;
     margin: 2px}
.LeftSide, .RightSide{ 
    display:inline-Block;
    width:120px;

    .mainItem:not(:last-child) {
        margin-bottom: 20px;
    }
}
}

<div class="TwoSidesLayout">
<div class="LeftSide">
    <div class="mainItem">
        <div class="wrap">
            <img class="image" src="...." alt="...">
            <div class="contentbody">.</div>
        </div>
    </div>
    <div class="mainItem">
        <div class="wrap">
            <img class="image" src="...." alt="...">
            <div class="contentbody">.</div>
        </div>
    </div>
</div>   

<div class="RightSide">
    <div class="mainItem">
        <div class="wrap">
            <img class="image" src="...." alt="...">
            <div class="contentbody">.</div>
        </div>
    </div>
    <div class="mainItem">
        <div class="wrap">
            <img class="image" src="...." alt="...">
            <div class="contentbody">.</div>
        </div>
    </div>
</div>
</div>