CSS3中提供了一些新的選擇器,使得開發者能夠更靈活地進行元素選擇,其中最為常用的就是判斷選擇器。
/* 判斷是否為第一個元素 */ p:first-child { color: red; } /* 判斷是否為最后一個元素 */ p:last-child { color: blue; } /* 判斷是否為父元素的第一個元素 */ p:first-of-type { font-weight: bold; } /* 判斷是否為父元素的最后一個元素 */ p:last-of-type { font-style: italic; } /* 判斷是否為奇數元素 */ p:nth-child(odd) { text-decoration: underline; } /* 判斷是否為偶數元素 */ p:nth-child(even) { text-decoration: line-through; } /* 判斷是否為指定位置的元素 */ p:nth-child(3) { background-color: yellow; }
通過使用不同的判斷選擇器,我們可以輕松地對頁面中的指定元素進行樣式的設置和修改,從而達到更好的可讀性和美觀度。