選擇器學不好，要飯要到老（誤）我認為學好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/