在容器中样式化最后一个div

Firstly here's the fiddle.

首先这是小提琴。

I'm trying to style last div which is inside another div with class 'container'. ':last-child' selector does not work.

我在尝试样式化最后一个div它在另一个div中带有class 'container'。':last-child'选择器不起作用。

HTML Code:

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:

CSS代码:

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

3 个解决方案

#1

div.container:last-child will select every children of div.container that is the last child of its parent, which in your case includes the <h5> elements.

div.container:last-child将选择div.container的每个子元素，该子元素是其父元素的最后一个子元素，在您的示例中包含

元素。

Try this instead:

试试这个:

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>

#2

You just need to change your

你只需要改变你的

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

来

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

This tells it to locate the last div that is located within the div.container instead of every div within the container.

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

Here is the updated JSFiddle.

这是最新的JSFiddle。

#3

The last-child selector basically takes the current selector and finds the last child of its parent. So in your case, div.container:last-child says "all the divs with the container class that are the last child of their parent." Well in your case the parent is <body> and the last child matching is the <div class="container"> What you want is div.container > *:last-child which will find the last child of the div.container

最后一个子选择器将获取当前选择器并找到其父选择器的最后一个子。在你的例子中，div。container:last-child表示“所有的div，它们的容器类是它们父类的最后一个子元素。”在你的例子中，父元素是最后一个子元素匹配是

你想要的是div。container > *:last-child，它会找到div。container的最后一个子元素

#1