在容器内定型最后一个div

cha*_*dan 4 html css html5 css3

首先,这是小提琴.

我正在尝试使用类'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>
Run Code Online (Sandbox Code Playgroud)

我正在尝试'div-four'.

CSS代码:

div.container:last-child{
  display: none; 
}
Run Code Online (Sandbox Code Playgroud)

Rha*_*apX 5

你只需要改变你的

div.container:last-child {
    display: none; 
}
Run Code Online (Sandbox Code Playgroud)

div.container div:last-child {
    display: none; 
}
Run Code Online (Sandbox Code Playgroud)

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

这是更新后的JSFiddle


Joh*_*son 5

div.container:last-child将选择其中每个孩子的div.container父母的最后一个孩子,在您的情况下包括<h5>元素.

试试这个:

div.container div:last-child{
  display: none; 
}
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)


dme*_*lio 5

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