在容器內定型最后一個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.