CSS最後一個子選擇器：選擇特定類的最後一個元素，而不是父代中的最後一個子元素？

109

<div class="commentList"> 
    <article class="comment " id="com21"></article> 
    <article class="comment " id="com20"></article> 
    <article class="comment " id="com19"></article> 
    <div class="something"> hello </div> 
</div>

我想選擇#com19？CSS最後一個子選擇器：選擇特定類的最後一個元素，而不是父代中的最後一個子元素？

.comment { 
    width:470px; 
    border-bottom:1px dotted #f0f0f0; 
    margin-bottom:10px; 
} 

.comment:last-child { 
    border-bottom:none; 
    margin-bottom:0; 
}

這並不工作，只要我有另一個div.something作爲commentList實際最後一個孩子。在這種情況下是否可以使用最後一個孩子選擇器來選擇article.comment的最後一次出現？

jsFiddle

來源

2011-09-04 matt

160

:last-child只有當有問題的元素是容器的最後一個孩子，不是最後一個特定類型的元素的作品。對於這一點，你要:last-of-type

http://jsfiddle.net/C23g6/3/

按@ BoltClock的評論，這是隻檢查最後article元素，而不是與類的.comment最後一個元素。

HTML

<div class="commentList"> 
    <article class="comment " id="com21"></article> 

    <article class="comment " id="com20"></article> 

    <article class="comment " id="com19"></article> 

    <div class="something"> hello </div> 
</div>

CSS

body { 
    background: black; 
} 

.comment { 
    width:470px; 
    border-bottom:1px dotted #f0f0f0; 
    margin-bottom:10px; 
} 

.comment:last-of-type { 
    border-bottom:none; 
    margin-bottom:0; 
}

來源

2011-09-04 08:17:03 Chris

+81

它不看類，但是，只有類型，因此，如果您正好有你將同一類非文章得到意想不到的結 – BoltClock

事實上，正如在這裏證明：http://jsfiddle.net/YmMZZ/1/ – Chris

它正常工作。但是，如果我們需要他們按類別縮小元素，那麼它就不會再起作用。 http://jsfiddle.net/aliemreeee/a4H7f/2/ –

如果你是浮動的元素，你可以顛倒順序

即float: right;而不是float: left;

然後使用此方法選擇第一個孩子一個班級的d。

/* 1: Apply style to ALL instances */ 
#header .some-class { 
    padding-right: 0; 
} 
/* 2: Remove style from ALL instances except FIRST instance */ 
#header .some-class~.some-class { 
    padding-right: 20px; 
}

這實際上是應用類，只是因爲它現在是在相反的順序的最後一個實例。

這是給你一個工作示例：

<!doctype html> 
<head><title>CSS Test</title> 
<style type="text/css"> 
.some-class { margin: 0; padding: 0 20px; list-style-type: square; } 
.lfloat { float: left; display: block; } 
.rfloat { float: right; display: block; } 
/* apply style to last instance only */ 
#header .some-class { 
    border: 1px solid red; 
    padding-right: 0; 
} 
#header .some-class~.some-class { 
    border: 0; 
    padding-right: 20px; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
    <img src="some_image" title="Logo" class="lfloat no-border"/> 
    <ul class="some-class rfloat"> 
    <li>List 1-1</li> 
    <li>List 1-2</li> 
    <li>List 1-3</li> 
    </ul> 
    <ul class="some-class rfloat"> 
    <li>List 2-1</li> 
    <li>List 2-2</li> 
    <li>List 2-3</li> 
    </ul> 
    <ul class="some-class rfloat"> 
    <li>List 3-1</li> 
    <li>List 3-2</li> 
    <li>List 3-3</li> 
    </ul> 
    <img src="some_other_img" title="Icon" class="rfloat no-border"/> 
</div> 
</body> 
</html>

來源

2013-07-29 00:59:06 Ozzy

請注意，如果浮動元素被推到下一行（即沒有足夠的水平空間浮動右/左） – Ozzy

這個怎麼樣的解決方案？

div.commentList > article.comment:not(:last-child):last-of-type 
{ 
    color:red; /*or whatever...*/ 
}

來源

2015-04-09 10:12:33 lsblsb

在'最後一個孩子'之前需要冒號。 – Austen

沒錯。錯字。謝謝。編輯。 – lsblsb

@lsblsb，你在這裏使用'article'，所以：對於給定的例子，not（：last-child）是不必要的。 –

我想這是最正確的答案是：使用:nth-child（或者，在這種特殊情況下，其對應:nth-last-child）。大多數人只知道這個選擇器的第一個參數，以基於n的計算獲取一系列項目，但它也可以採用「[任何CSS選擇器]」的第二個參數。

你的情況可能與此選擇來解決：.commentList .comment:nth-last-child(1 of .comment)

但在技術上是正確的，並不意味着你可以使用它，但是，因爲這個選擇是截至目前僅應用於Safari。

對於進一步閱讀：

來源

2017-08-17 13:01:19 hurrtz

的東西，我覺得應該在這裏評論說，爲我工作：

使用:last-child多次在需要的地方所以它總是得到最後一個。

藉此例如：

.page.one .page-container .comment:last-child { 
 
    color: red; 
 
} 
 
.page.two .page-container:last-child .comment:last-child { 
 
    color: blue; 
 
}

<p> When you use .comment:last-child </p> 
 
<p> you only get the last comment in both parents </p> 
 

 
<div class="page one"> 
 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 

 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 
</div> 
 

 
<p> When you use .page-container:last-child .comment:last-child </p> 
 
<p> you get the last page-container's, last comment </p> 
 

 
<div class="page two"> 
 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 

 
    <div class="page-container"> 
 
    <p class="comment"> Something </p> 
 
    <p class="comment"> Something </p> 
 
    </div> 
 
</div>

來源

2017-11-22 01:53:30 Jesus

哦，兒子！你去哪兒了？ –

@ManojKumar無處不在我的孩子 – Jesus

當一大羣人在等待你的第二次來臨時，你在做什麼？ –

CSS最後一個子選擇器：選擇特定類的最後一個元素，而不是父代中的最後一個子元素？

回答

相關問題