“Last” CSS pseudo-selectors are another useful way of detaching presentation from markup: rather than littering our HTML with classes to try to define what happens to the last instance of elements inside them, which would force us to move and reapply those classes when the content changes, we use a selector that will only ever be applied to the last element without changing our markup at all.

“最后一個(gè)” CSS偽選擇器是將表示形式與標(biāo)記分離的另一種有用方法：不是用類來亂填充我們的HTML來嘗試定義它們內(nèi)部元素的最后一個(gè)實(shí)例發(fā)生了什么，這將迫使我們在出現(xiàn)此類情況時(shí)移動(dòng)并重新應(yīng)用這些類。內(nèi)容更改后，我們使用的選擇器將僅應(yīng)用于最后一個(gè)元素，而根本不會(huì)更改標(biāo)記。

In order to use last-child effectively, we need to understand the child and sibling relationship in CSS. Let’s say we have the following markup:

為了有效地使用last-child ，我們需要了解CSS中的孩子和兄弟姐妹之間的關(guān)系。 假設(shè)我們有以下標(biāo)記：

<article><div><p>Along the shore the cloud waves break,</p><p>The twin suns sink behind the lake,</p><p>The shadows lengthen</p><p>In Carcosa.</p></div><div><p>Strange is the night where black stars rise,</p><p>And strange moons circle through the skies,</p><p>But stranger still is</p><p>Lost Carcosa.</p></div> </article>

If we wanted to indent the last paragraph in each <div> element, we could do many things: apply a repeated inline style (extremely wasteful, difficult to maintain or change, and very time-consuming); a repeated class (better, but still uses a lot of time to create, apply or change), nth-child, or the best option: last-child

如果我們想縮進(jìn)每個(gè)<div>元素的最后一段，我們可以做很多事情：應(yīng)用重復(fù)的內(nèi)聯(lián)樣式 (極其浪費(fèi)，難以維護(hù)或更改，并且非常耗時(shí))； 重復(fù)的類 (更好，但仍然需要大量時(shí)間來創(chuàng)建，應(yīng)用或更改)， nth-child或最佳選擇： last-child

article p:last-child { text-indent: 2rem; }

Which will result in:

這將導(dǎo)致：

Along the shore the cloud waves break,

沿著海岸，云浪破裂，

The twin suns sink behind the lake,

雙胞胎的太陽下沉在湖后，

The shadows lengthen

陰影拉長

In Carcosa.

在卡科薩。

Strange is the night where black stars rise,

奇怪的是黑星升起的夜晚，

And strange moons circle through the skies,

奇怪的月亮在天空中盤旋，

But stranger still is

但是陌生人仍然是

Lost Carcosa.

丟失的卡科薩。

總結(jié)

以上是生活随笔為你收集整理的我们的最后：在CSS中使用last-child和last-of-type的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。