为容器内的最后一个 div 设置样式答案

【问题标题】：Styling last div inside a container为容器内的最后一个 div 设置样式
【发布时间】：2015-08-06 00:29:55
【问题描述】：

首先是fiddle。

我正在尝试对位于另一个具有“容器”类的 div 中的最后一个 div 进行样式设置。 ':last-child' 选择器不起作用。

HTML 代码：

<div class="container">
<div class="div-one">
    <h5> This is Div One </h5>
</div>
<div class="div-two">
    <h5> This is Div Two </h5>
</div>
<div class="div-three">
    <h5> This is Div Three </h5>
</div>
<div class="div-four">
    <h5> This is Div Four </h5>
</div>

我正在尝试设置“div-four”的样式。

CSS 代码：

div.container:last-child{
  display: none; 
}

【问题讨论】：

标签： html css

【解决方案1】：

last-child 选择器基本上采用当前选择器并找到其父级的最后一个子级。因此，在您的情况下，div.container:last-child 表示“所有具有容器类的 div，它们是其父级的最后一个子级。”那么在你的情况下，父母是<body>，最后一个匹配的孩子是<div class="container">你想要的是div.container > *:last-child，它将找到div.container的最后一个孩子

【讨论】：

感谢您的详细解释

【解决方案2】：

div.container:last-child 将选择 div.container 的每个子代，即其父代的最后一个子代，在您的情况下包括 <h5> 元素。

试试这个：

div.container div:last-child{
  display: none; 
}

div.container div:last-child{
    display: none; 
}

h5{
    font-family: Montserrat;
    color: #49c8ff;
    font-size: 22px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
}

<div class="container">
    <div class="div-one">
        <h5> This is Div One </h5>
    </div>
    <div class="div-two">
        <h5> This is Div Two </h5>
    </div>
    <div class="div-three">
        <h5> This is Div Three </h5>
    </div>
    <div class="div-four">
        <h5> This is Div Four </h5>
    </div>
</div>

【讨论】：

【解决方案3】：

你只需要改变你的

div.container:last-child {
    display: none; 
}

到

div.container div:last-child {
    display: none; 
}

这告诉它找到位于div.container 内的最后一个div，而不是容器内的每个div。

这是更新后的JSFiddle。

【讨论】：

@Evochrome 谢谢，没有意识到它没有更新。更新了解决方案中的链接。