CSS3中提供了許多強大的選擇器,其中之一是結構偽類選擇器。結構偽類選擇器可以根據元素在文檔結構中的位置進行選擇,非常適用于網頁中需要按照結構來選取元素的情況。下面將簡單介紹幾種結構偽類選擇器。
/* 選取第一個元素 */
:first-child是最常用的結構偽類選擇器之一,可以選取指定父元素的第一個子元素。
/* 實例 */ p:first-child{ color: red; }
/* 選取最后一個元素 */
:last-child與:first-child類似,可以選取指定父元素的最后一個子元素。
/* 實例 */ p:last-child{ color: blue; }
/* 選取第n個元素 */
:nth-child可以選取指定父元素的第n個子元素。在n前加上正號或負號,可以指定不同的選擇規則。
/* 實例 */ /* 選擇第1,3,5...個p元素 */ p:nth-child(2n-1){ color: green; } /* 選擇第偶數個p元素 */ p:nth-child(2n){ color: orange; }
/* 選取第n個特定類型的元素 */
:nth-of-type可以選取指定父元素中特定類型的第n個子元素。
/* 實例 */ /* 選擇第3個div元素 */ div:nth-of-type(3){ color: purple; }
除了以上這些選擇器,CSS3中還提供了眾多的其他結構偽類選擇器,例如:first-of-type,:last-of-type,:only-child等等。這些選擇器大大增強了CSS的能力,使得樣式定位更為靈活化。開發人員可以根據需要靈活使用,效果會更加優秀。