CSS之後代選取器與多類別選取器,css代選取器多類

來源:互聯網
上載者:User

CSS之後代選取器與多類別選取器,css代選取器多類

<新人報到,歡迎拍磚#- ->

一、後代選取器

  說起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。完畢。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.