在容器内定型最后一个div
[英]Styling last div inside a container
问题描述
首先，这是小提琴 。
我正在尝试使用类'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;
}
3 个解决方案
解决方案1
5 已采纳 2015-08-06 00:36:24
div.container:last-child将选择div.container每个子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>
解决方案2
4 2015-08-06 00:36:16
你只需要改变你的
div.container:last-child {
display: none;
}
至
div.container div:last-child {
display: none;
}
这告诉它找到位于div.container的最后一个div而不是容器中的每个div 。
这是更新的JSFiddle 。
解决方案3
4 2015-08-06 00:37:39
last-child选择器基本上采用当前选择器并查找其父项的最后一个子项。 所以在你的情况下， div.container:last-child说“所有带有容器类的div都是它们父级的最后一个子节点。” 在你的情况下，父亲是<body> ，最后一个匹配的孩子是<div class="container">你想要的是div.container > *:last-child ，它将找到div.container的最后一个孩子
在div内设置边框样式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.