在 CSS3 中,我們可以使用偽類選擇器(:nth-of-type)來選擇前幾個特定的元素。
/* 選擇前三個 li 元素 */ li:nth-of-type(-n+3) { color: red; }
上述代碼表示選擇前三個 li 元素,其中 “-n” 表示從特定的元素開始,例如 “-n+3” 表示從第三個元素開始,而 “+” 則表示從第一個元素開始。
/* 選擇第偶數(shù)個 span 元素 */ span:nth-of-type(even) { background-color: yellow; }
上述代碼表示選擇第偶數(shù)個 span 元素,其中 “even” 表示選擇偶數(shù),而 “odd” 則表示選擇奇數(shù)。
除了可以選擇前幾個元素,我們還可以選擇從第幾個元素開始,比如:
/* 選擇從第四個 li 元素開始 */ li:nth-of-type(n+4) { font-weight: bold; }
以上代碼表示選擇從第四個 li 元素開始,其中 “n+” 表示從第幾個元素開始,如果想選擇前幾個元素,可以將 “n+” 替換為 “-n+”。
總的來說,使用 CSS3 偽類選擇器(:nth-of-type) 可以更加靈活的控制選擇元素的個數(shù)和順序,讓網(wǎng)頁樣式更加自由多變。