CSS3倒數選擇器是一種新的選擇器,可以根據元素在其父元素中的位置來選擇元素。在CSS2中,只有正數選擇器,它們根據元素在其父元素中的位置來選擇元素。但是,倒數選擇器可以幫助我們更方便地選擇元素。
/* 選擇倒數第一個元素 */ p:nth-last-child(1) { color: red; } /* 選擇倒數第二個元素 */ p:nth-last-child(2) { color: blue; } /* 選擇倒數第三個到倒數第五個元素 */ p:nth-last-child(-n+5):nth-last-child(-n+3) { color: green; }
如上所示,我們可以使用:nth-last-child()函數來選擇倒數元素。在這個函數中使用數字來表示元素在其父元素中倒數第幾個。如果我們想選擇倒數第n個元素,我們可以使用:nth-last-child(n)。
倒數選擇器還支持一些額外的參數。我們可以使用關鍵字even來選擇所有偶數元素,使用關鍵字odd來選擇所有奇數元素。例如:
/* 選擇所有偶數元素 */ p:nth-last-child(even) { font-weight: bold; } /* 選擇所有奇數元素 */ p:nth-last-child(odd) { font-style: italic; }
到目前為止,CSS3倒數選擇器是一種非常有用的選擇器,可以大大簡化我們的CSS代碼。在適當的情況下,我們應該考慮使用它來提高我們的工作效率。
下一篇css3 九宮格 抽獎