Question

我是CSS的新手，在搜索google之后，我仍然很难使：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，然后意识到角度重复了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的独生子。因此，每个单项的边距为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>

Answer 2

使用您的代码，您可以使用.A > .B:last-child > .C并设置margin-bottom:0。

请参见下面的代码段：

.A {
  border:1px solid red;
}

.B > .C {
    margin-bottom: 8px;
    background-color:lightpink;
    color:white;
}

.A > .B:last-child > .C {
    margin-bottom: 0px;
}

<div class="A">
    <div class="B">
        <div class="C">1</div>
    </div>
    <div class="B">
        <div class="C">2</div>
    </div>
    <div class="B">
        <div class="C">3</div>
    </div>
</div>

Answer 3

我看到您要在具有“ A”类的“ C”类的div上应用CSS。在这种情况下，您无需打扰“ B”类。

例如，如果您有父类。您可以访问第n个深度子级。就像我尝试过的一样。

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

这是CSS

.A > div > div { 
  background-color:yellow;
}
.A > div:last-child > div:last-child { 
  background-color:red;
}

https://jsfiddle.net/kyaLh19n/

如果您看这张图片，我做了什么。我确实在类A内的所有子级上应用了CSS，然后覆盖了最后一个。

希望我能为您提供帮助。

Answer 4

谢谢大家！

我需要结合人们的建议。

首先是将跨度更改为div。
第二个操作是在重复的角度div上方添加一个包装器div，该类成为A类。
第三个人在我的CSS中使用.A .B：last-child .C。

我还了解到发布实际代码而不是基本示例会更有帮助。

嵌套div中的最后一个孩子

4 个答案: