CSS：基於它們出現的順序而不是類的樣式列表項？

我使用的CMS生成的網站地圖只有很少的樣式選項，基本上，它不會允許我將類添加到列表項中，我需要它們給它們不同的背景顏色。CSS：基於它們出現的順序而不是類的樣式列表項？

現在我知道有第一個孩子和最後一個孩子的僞類可以讓我對我的列表中的第一個和最後一個項目進行樣式設置，但是是否有任何CSS允許我調用列表中的其他項目如果一個班級不能分配給他們？

2012-07-18 Jane

的「CSS 2」是令人困惑 - 是「CSS級別2」或「CSS來」？請注意'：last-child'在CSS2中不存在，只有'：first-child'。 – BoltClock

使用:nth-child()從CSS3：

/* select the third element if it's an li */ 
li:nth-child(3) { 
    background-color: yellow; 
}

:nth-child() won't work在舊的瀏覽器，如IE8，但there's a CSS2 workaround。

來源

2012-07-18 13:50:58 thirtydot

我剛剛更新了我的一個類似的解答與CSS2解決方法的說明：http://stackoverflow.com/questions/9682521/how-do-i-get-the-nth-child-of-an-element-using -css2選擇器/ 9682598＃9682598 – BoltClock

nth-child，nth-of-type

實例：

選擇列表

li:nth-child(2) {/*styles*/}

選擇奇列表項

li:nth-child(odd) {/*styles*/}

選擇第三第二項，所述第六，第9，...列表項

li:nth-child(3n) {/*styles*/}

選擇1號，5號，9號，...列表項

li:nth-child(4n+1) {/*styles*/}

來源

2012-07-18 13:51:23 Ana

CSS2不支持：第n個孩子（N），maby你可以在右邊的位置上製作< ul>的背景圖像。但我說老人們用舊瀏覽器;）

來源

2012-07-18 13:52:02 Gijs

與CSS2，也許不是。隨着CSS3，還有的nth-child()選擇：

element:nth-child(2) { ... }

以上將獲得的第二個孩子。

jsFiddle

否則，你可以使用JavaScript/jQuery來得到你想要的結果。這裏是一個jQuery的例子：在這個問題

$(function() { 
    $('selector').eq(1).css('background', 'blue'); 
});

jsFiddle

來源

2012-07-18 13:52:13 Zhihao

CSS：基於它們出現的順序而不是類的樣式列表項？

回答

相關問題