iT邦幫忙

DAY 15
7

作個網站吧!系列 第 15

作個網站吧!Beauty CSS(4)-選擇器part2

選擇器學不好,要飯要到老(誤)我認為學好CSS選擇器對於網站效率有很大幫助,當然這點我也還在學習當中。
今天繼續紀錄CSS的選擇器,文章若有謬誤還請不吝指正m(_ _)m。
選擇器學不好,要飯要到老(誤)我認為學好CSS選擇器對於網站效率有很大幫助,當然這點我也還在學習當中。
今天繼續紀錄CSS的選擇器,文章若有謬誤還請不吝指正m(_ _)m。

Adjacent sibling selectors-同層相鄰選擇器
所謂的相鄰就是鄰居啦~要住在右手邊的隔壁才會有作用,用加號把鄰居放一起吧。

A + B { color: pink; } 

隔壁的隔壁不算唷

<p>我是A</p>
<span>我是B</span>
<span>我是B的隔壁但我不會變色因為我前面沒有A</span>

General sibling selector-同層兄弟選擇器
跟上者不同,這個選擇器是讓同一個樓層的住戶全部都套用,就像是同層公寓的門吧!不過英文意思是兄弟呢...如果直譯應該說是多胞胎?寫法是中間用條毛毛蟲連在一起~

A ~ B { color: pink; }




<p>我是A</p>
<span>我是B</span>
<span>我是B的隔壁,我也可以變色了!</span>

Attribute selectors-屬性選擇器分成以下幾種

  1. 標籤內有屬性(attribute)的會一起套用(屬性不一定是title,例如alt也可以):

    p[title] { color: blue; }

  2. 屬性(attribute)以及值(value)兼具的時候套用:

    p[title=xyz] { color: red; }

  3. 屬性(attribute)內含部份值(value)的字元都可以套用,在屬性後面加條毛毛蟲跟著走~:

    p[title~=xyz] { color: red; }

  4. 屬性(attribute)的起始值(value)完全符合才會套用,將屬性後面隔一道牆吧|:

    p[title|=xyz] { color: red; }

以上是今天的分享,明日預計是child系列!若有誤請指正,謝謝。
本文同步發表於http://azzurro.blog.aznc.cc/make\_a\_website\_15/


上一篇
作個網站吧!Beauty CSS(3)-選擇器part1
下一篇
作個網站吧!Beauty CSS(5)-選擇器part3
系列文
作個網站吧!30

尚未有邦友留言

立即登入留言