CSS之後代選擇器與多類別選擇器

一、後代選擇器

　　說起CSS的後代選擇者。它屬於派生選擇器中的一種，兩者附屬關係如下：

-->派生選擇器

 ----CSS 後代選擇器

 

 ----CSS 子元素選擇器

 ----CSS 鄰近兄弟選擇器

　　那麼問題來了，什麼​​時候需要用到後代選擇器嘞？假設你需要為p元素中的span元素（.A類）設定特殊樣式，可以用後代選擇器選擇該元素：

<span style="color: #800000;">/*方式1*/<br>p span</span>{<span style="color: #ff0000;">...</span>}<br>/*方式2*/<br>p .A{...}

     注意，上述程式碼的兩個選擇器間以空格空格空格分隔。另外，後代選擇器使用起來灰常自由。這麼說吧，上述例子中p元素不一定必須是span的老爸，只要是span的直系長輩比如爺爺都可以。換句話說，在p元素包含span元素的情況下，後代選擇器就可以發揮作用了。

 

二、多類選擇器

　　接下來，來說說多類選擇器。舉個例子：

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}

     注意，上述程式碼的兩個選擇器間沒有沒有沒有空格分隔。好的，現在有.funny和.handsome這兩個類，顯然“我是個有趣並且帥的boy，兩者缺一都不是我”是一個真命題，所以只有“.funny.handsome”這個多類選擇器才可以選擇我。但單獨的「.funny」不能選擇我，原因見前文提到的真命題，「.handsome」選擇器同理。

     好吧不鬧了，多類選擇器的用處挺多的，比如要設置“1、被點擊(.selected)；2、按鈕的樣式”，就可以用：

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}

     這是我在部落格花園寫下的第一篇博文，XD。完畢。