這裡以無序列表來示範什麼是偽類的用法:
我的程式碼
假設今天有一個無序列表是這樣:
:first-child
首先我們會以一個『冒號』來表示『偽類』,我若要告訴CSS,我要選擇li標籤的first-child
的文字顏色是紅色就是這樣:
:last-child
我要選擇li標籤的last-child
的文字顏色yellowgreen色就是這樣:
li:nth-child(順序號碼)
- li:nth-child(odd) 奇數的li標籤
- li:nth-child(even) 偶數的li標籤
注意失效:使用偽類,如果你在子元素混合了多項不同元素 偽元素就不是很好用,較適合li使用 因為子元素都是li
:first-child 指的是“第一個子元素“,也就是說,假設情況是,在article容器裡的p標籤,但是,article容器中的第一個子元素標籤其實是h2,第二個子元素標籤才是p,那以下設定會失效喔
article p:first-child {
color: green;
}