html - 嵌套 div 中的最后一个 child

Question

我是 CSS 的新手，在谷歌搜索后我仍然很难让 :last-child 选择器工作。

HTML:

<div class="A">
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="B">
        <div class="C"></div>
    </div>
</div>

CSS:

.A > .B > .C {
    margin-bottom: 8px;
}

.A > .B > .C:last-child {
    margin-bottom: 0px;
}

我的目标是我希望前两个 .C div 有底部边距，但最后一个 .C div 不应该有边距。但是，:last-class 没有被注册——所有 3 个 .C div 的底部边距都是 8px。

我还尝试了 :last-child 在不同类别上的变体，以及子选择器与无子选择器我不确定我做错了什么/我需要做什么才能将最后一个 .C 类 margin-bottom 设置为 0px。

编辑:我实际上能够让上面的代码在 codepen.io 中工作...下面是我的实际代码，我无法正常工作。

<div class="A" ng-repeat="component in components">
    <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="B"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
        <span class="C">
            <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
        </span>
    </div>
</div>

这将重复组件的数量，最多 4 个组件。

编辑 2:这是通过尝试下面的人建议的不同事情来解决的。我将跨度更改为 div，然后意识到 Angular 重复了 A 类 div。下面是我最终的 html 和 css:

HTML:

<div class="A">
    <div class="B" ng-repeat="component in components">
        <div title="{{component.name}}" ng-show="rightStatusBarFlags[component.id] === true" class="C"  ng-class="(component.notifyFlag === true)? 'right-status-alert' : ''" ng-click="toggleComponentVisibility(component)">
            <div class="btn btn-status-sections">
                <img class="icon-component_{{component.id}}" ng-show="!component.notifyFlag"></img>
            </div>
        </div>
    </div>
</div>

CSS:

.A .B .C {
margin-bottom: 8px;
}
.A .B:last-child .C {
margin-bottom: 0px;
}

Answer 1

您的 C div 都是 B div 的单个子元素。所以每个人的 margin 都是0。你想给最后一个 B 里面的 C 添加边距。所以

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

或者，您可以重新排列您的 html 并保留您定义的 css，如下所示:

<div class="A">
    <div class="B">
        <div class="C"></div>
        <div class="C"></div>
        <div class="C"></div>
    </div>
</div>