如何爲每行/每行的每個最後一個元素設置不同的樣式？

我一直在試圖創建一個使用如何爲每行/每行的每個最後一個元素設置不同的樣式？

display:inline=block

我需要每一行/列的每一個最後一個元素不同風格的網格。我試過

nth-child 
nth-of-type

但是，當我使用它時，它會與我的其他網格混淆。那麼，如何在不添加新類的情況下做到這一點？

編輯1：http://jsfiddle.net/#&togetherjs=kfTw3ULKmE

編輯2：我已經決定，內嵌塊都有些太複雜，所以我切換到浮動。我的網格現在可用！

來源

2013-10-26 Michelle Cantin

我們就需要看您的具體HTML/CSS，理想情況下，JFiddle，發表評論。 '：最後一個孩子'可能有助於購買它可能不適用於你的電影 –

@Paulie_D http://michellecantin.ca/test/features/grids/這是我的文檔 –

不...不是鏈接... HTML和CSS最好在一個縮減的情況下JSFiddle。我們不需要通過Developer Tools來查找特定規則。 –

在CSS3中，如果將每個第n個子類與某個類的類相關聯，並且每個n類與另一個類的使用都可以對每個類進行不同的設置。例如，

<html> 
<div class="nth-child"> 
    //some code 
</div> 

<div class="nth-of-type"> 
//some code 
</div> 

</html>

然後在你的CSS文件，你會做同樣的事情到這一點：

.nth-child 
{ 
    //style rules 
} 
.nth-of-type 
{ 
//style rules 
}

我希望這是你要找的人，沒有一個張貼的例子是有點難以明白你的意思。但是如果你想給我們JS這個，那麼你會創建一個使用"var elements= document.getElementsByClassName("nth-child")" 的你將通過「elements.length」設置每個元素的風格爲「無」

來源

2013-10-26 16:40:22 user2917241

「在CSS3中」你可以分別使用'：nth-child（）'和'：nth-of-type（）'僞類。這就是問題中的含義。 – BoltClock

@ user2917241我真的不明白你想說什麼。你正在使用nth-type和n-child作爲類。我不想添加任何更多的類。 –

好了，現在我想我明白你米歇爾。只要按照Sissy的建議，如果你真的不想再添加類。然而，我描述的方法最初只適用於你想要的元素分配給特定的用戶定義的類。儘管如此，如果你選擇添加更多的類，它將會工作。否則，jquery就是你的答案 – user2917241

環就一個JS功能獲得在你的頁面的所有元素正如我從你的代碼中看到的那樣，你不能使用nth-child來實現你的目標。我將嘗試用一個例子來解釋：您希望課程class =「four」的第4個和第8個孩子塗成紅色。爲了使用第n個孩子或第n個孩子，你必須引用從他們父母開始的孩子，即身體。所以很難說身體的孩子名單中的數字是第四節和第八節的節=「四」，並且它根本不靈活。我想你是以錯誤的方式使用它，像section.four：last-child，這是不正確的。請檢查：w3schools link

此外，nth-child和nth-of-type不能與選擇器一起使用，但只能與一個元素一起使用，因此無法執行類似.four：nth-child之類的操作在你的部分之外的class =「four」的div）。

所以唯一的辦法，而無需添加更多的類是jQuery的，就像這樣：

$('.four').last().css('background-color', 'red');

來源

2013-10-26 17:09:06 sissy

儘管我同意並且已經投了票，但也許值得使用替代引用（W3School在這裏沒有很好的聲譽），例如W3.org的['：nth-child（）'] （http://www.w3.org/TR/selectors/#nth-child-pseudo）或[MDN上的''：nth-child（）']（https://developer.mozilla.org/en-US /文檔/網絡/ CSS /：第n個孩子）。 –

謝謝，我會記住:) – sissy

它只會改變最後一個。我期待着改變每一行的每一個元素。 –

如何爲每行/每行的每個最後一個元素設置不同的樣式？

回答

相關問題