CSS3引入了許多新的偽類元素,這些偽類元素可以讓我們在樣式設計中更加靈活。下面介紹一些常用的CSS3新增偽類元素。
/* :nth-child(n) 選擇器 */ p:nth-child(2) { color: red; } /* :not(selector) 選擇器 */ p:not(.selected) { color: blue; } /* :focus-within 選擇器 */ form:focus-within { background-color: lightblue; } /* ::before 偽元素 */ p::before { content: "A"; } /* ::after 偽元素 */ p::after { content: "B"; }
:nth-child(n)選擇器可以用來選擇某個父元素下的特定子元素。例如,上述代碼中的p:nth-child(2)選擇器會選中第二個p元素并將它的文字顏色設置為紅色。
:not(selector)選擇器可以用來排除某個元素。比如,上述代碼中的p:not(.selected)選擇器會選中所有沒有被選中的p元素并將它們的文字顏色設置為藍色。
:focus-within 選擇器可以選中含有當前活動元素的父元素。例如,上述代碼中的form:focus-within選擇器會選中當前輸入內容的表單并將其背景顏色設為淺藍色。
::before和::after偽元素可以在某個元素的特定位置添加內容。例如,上述代碼中的p::before偽元素會在每個p元素的內容前添加字母"A"。
總之,CSS3新增的偽類元素讓我們在樣式設計中更加靈活。
下一篇css3新增方法是