CSS3是CSS最新的版本,其中新增了許多強(qiáng)大的偽類(lèi)。偽類(lèi)可以讓我們?cè)诓桓淖僅TML結(jié)構(gòu)的情況下,為元素增加樣式和功能。下面就是幾個(gè)CSS3新增的偽類(lèi)舉例。
/* :not偽類(lèi) */ /* 用于選擇不匹配指定選擇器的元素 */ p:not(.first) { color: red; } /* :checked偽類(lèi) */ /* 用于選取選中的單選框或復(fù)選框 */ input[type="checkbox"]:checked { background-color: green; } /* :nth-of-type偽類(lèi) */ /* 用于選擇某一類(lèi)型的子元素中的第n個(gè)元素 */ ul li:nth-of-type(2) { color: blue; } /* :nth-last-of-type偽類(lèi) */ /* 用于選擇某一類(lèi)型的子元素中的倒數(shù)第n個(gè)元素 */ ol li:nth-last-of-type(2) { color: orange; } /* :first-of-type偽類(lèi) */ /* 用于選擇某一類(lèi)型的子元素中的第一個(gè)元素 */ ul li:first-of-type { font-weight: bold; }
通過(guò)使用這些新增的偽類(lèi),我們可以更加方便地選取和改變特定元素的樣式和行為,從而打造出更加豐富多樣的頁(yè)面效果。