[英]Styling last div inside a container
Firstly here's the fiddle . 首先,这是小提琴 。
I'm trying to style last div which is inside another div with class 'container'. 我正在尝试使用类'container'设置另一个div内的最后一个div。 ':last-child' selector does not work.
':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'. 我正在尝试'div-four'。
CSS code: CSS代码:
div.container:last-child{
display: none;
}
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
每个子div.container
,它们是其父节点的最后一个子节点,在您的情况下包含<h5>
元素。
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>
You just need to change your 你只需要改变你的
div.container:last-child {
display: none;
}
to 至
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
。
The last-child
selector basically takes the current selector and finds the last child of its parent. last-child
选择器基本上采用当前选择器并查找其父项的最后一个子项。 So in your case, div.container:last-child
says "all the divs with the container class that are the last child of their parent." 所以在你的情况下,
div.container:last-child
说“所有带有容器类的div都是它们父级的最后一个子节点。” 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
在你的情况下,父亲是
<body>
,最后一个匹配的孩子是<div class="container">
你想要的是div.container > *:last-child
,它将找到div.container
的最后一个孩子
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.