<新人報到,歡迎拍磚#- -> 一、後代選擇器 說起CSS的後代選擇器。它屬於派生選擇器中的一種,兩者附屬關係如下: -->派生選擇器 CSS 後代選擇器 CSS 子元素選擇器 CSS 相鄰兄弟選擇器 那麼問題來了,什麼時候需要用到後代選擇器嘞?假設你需要為p元素中的span元素(.A類)設置特殊樣 ...
<新人報到,歡迎拍磚#- ->
一、後代選擇器
說起CSS的後代選擇器。它屬於派生選擇器中的一種,兩者附屬關係如下:
-->派生選擇器
----CSS 後代選擇器
----CSS 子元素選擇器
----CSS 相鄰兄弟選擇器
那麼問題來了,什麼時候需要用到後代選擇器嘞?假設你需要為p元素中的span元素(.A類)設置特殊樣式,可以用後代選擇器選擇該元素:
/*方式1*/
p span{...}
/*方式2*/
p .A{...}
註意,上述代碼的兩個選擇器間以空格空格空格分隔。另外,後代選擇器使用起來灰常自由。這麼說吧,上述例子中p元素不一定必須是span的老爸,只要是span的直系長輩比如爺爺都可以。換句話說,在p元素包含span元素的情況下,後代選擇器就可以發揮作用了。
二、多類選擇器
接下來,來說說多類選擇器。舉個例子:
.funny{...} .handsome{...} .funny.handsome{...}
註意,上述代碼的兩個選擇器間沒有沒有沒有空格分隔。好的,現在有.funny和.handsome這兩個類,顯然“我是個有趣並且帥的boy,兩者缺一都不是我”是一個真命題,所以只有“.funny.handsome”這個多類選擇器才可以選擇我。但是單獨的“.funny”不能選擇我,原因見前文提到的真命題,“.handsome”選擇器同理。
好吧不鬧了,多類選擇器的用處挺多的,比如要設置“1、被點擊(.selected);2、按鈕的樣式”,就可以用:
button.selected{...}
這是我在博客園寫下的第一篇博文,XD。完畢。