Question

首先是fiddle。

我正在尝试使用类'container'设置另一个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; 
}

Answer 1

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>

Answer 2

您只需要更改

即可

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

到

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

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

以下是更新后的JSFiddle。

Answer 3

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

在容器内定型最后一个div

3 个答案: