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