CSS高階選擇器
阿新 • • 發佈:2018-12-26
1 :target
- 表示元素被hash匹配時的狀態
- eg:URL是/post/a#p1時,id為p1的元素處於被target的狀態
p{diesplay:none; }
p :target{display:block;}
2 :lang
- 元素匹配上指定語言時的狀態
- 瀏覽器通過lang屬性獲得語言資訊
- eg:不同文字的符號有可能不一樣,所以用lang去檢測文字並匹配
:lang(fr) p:before{content:”<”;}
:lang(fr) p:after{content:”>”;}
3 :nth-child
- nth-child(an+b)選中某些子元素
- eg: nth-child(3n),選中3,6,9…..等元素
4 :first-child
:last-child
:first-line:首行
:first-letter :首字母
:nth-last-child(n): 匹配屬於其元素的第 n個子元素的每個元素,不論元素的型別,從最後一個子元素開始計數
:nth-last-of-type(n):匹配屬於父元素的特定型別的第 n 個子元素的每個元素,從最後一個子元素開始計數
:first-of-type:匹配屬於其父元素的特定型別的首個子元素的每個元素
:last-of-type
:only-child:匹配屬於其父元素的唯一子元素的每個元素
:only-of-type匹配屬於其父元素的特定型別的唯一子元素的每個元素
5 :not()
- 排除匹配的元素
- eg: img:not([alt]),選擇沒有寫alt屬性的圖片
6 :empty
- 匹配標籤裡沒有任何子元素
- eg: li:empty{display:none;}
7 :checked
- checkbox被選中時的狀態
eg:當checkbox的狀態改變時,lable也會做相應的動作
.toggle input[type=checkbox]{visibility:hidden;}
.toggle input:checked + label{left:43px;}