logo标签列表

在容器中为最后一个div设置样式

htmlcss
6

首先这里是示例代码。

我试图给位于另一个带有'class 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>

I'm trying to style 'div-four'.

CSS code: 

div.container:last-child{
  display: none; 
}
3个回答
7
last-child选择器基本上采取当前选择器，然后找到其父元素的最后一个子元素。所以在你的情况下，div.container:last-child 表示“所有具有容器类的 div 元素，这些元素是它们父级的最后一个子元素。”在你的情况下，父元素是<body>，匹配的最后一个子元素是 <div class="container">。你需要的是div.container > *:last-child，它将查找div.container的最后一个子元素。
感谢您的详细解释。 - chandan
6

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>

5
您只需要更改您的
div.container:last-child {
    display: none; 
}

为了

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

这告诉它定位最后一个div，而不是容器内的每个div。所在位置为div.container。
这是更新后的JSFiddle。
@Evochrome 谢谢，我没有意识到它没有更新。已在解决方案中更新链接。 - RhapX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接