CSS選擇正數及倒數是Web開發中常用的技巧之一。在CSS中,我們可以通過一些屬性選擇器來選取頁面中的不同元素。
:nth-child(n)
這個選擇器可以用來選取父元素中的第n個子元素。其中n可以是正數、負數、整數、分數等等。例如:
ul li:nth-child(2) { /* 選中ul元素下的第二個li元素 */ } ul li:nth-child(-2) { /* 選中ul元素下的倒數第二個li元素 */ }
如果n為正數,則從左往右數;如果n為負數,則從右往左數。還可以通過關鍵字odd和even選擇奇數和偶數元素:
ul li:nth-child(odd) { /* 選中ul元素下的奇數li元素 */ } ul li:nth-child(even) { /* 選中ul元素下的偶數li元素 */ }
:nth-last-child(n)
ul li:nth-last-child(2) { /* 選中ul元素下的倒數第二個li元素 */ } ul li:nth-last-child(-2) { /* 選中ul元素下的第二個li元素 */ }
這個選擇器與:nth-child(n)很相似,不同之處在于它是從父元素的最后一個子元素開始數。如果n為正數,則從右往左數;如果n為負數,則從左往右數。
通過這兩個選擇器,我們可以很方便地選擇不同的元素,使得網頁的樣式變得更加靈活多樣。
上一篇css隱藏屬性和顯示屬性
下一篇css選擇最后的子元素