選擇器學不好，要飯要到老（誤）我認為學好CSS選擇器對於網站效率有很大幫助，當然這點我也還在學習當中。
今天繼續紀錄CSS的選擇器，文章若有謬誤還請不吝指正m(_ _)m。
Adjacent sibling selectors-同層相鄰選擇器
所謂的相鄰就是鄰居啦～要住在右手邊的隔壁才會有作用，用加號把鄰居放一起吧。
|
1 |
; html-script: false ]A + B { color: pink; } |
隔壁的隔壁不算唷
|
1 2 3 |
; html-script: false ]<p>我是A</p> <span>我是B</span> <span>我是B的隔壁但我不會變色因為我前面沒有A</span> |
General sibling selector-同層兄弟選擇器
跟上者不同，這個選擇器是讓同一個樓層的住戶全部都套用，就像是同層公寓的門吧！不過英文意思是兄弟呢…如果直譯應該說是多胞胎？寫法是中間用條毛毛蟲連在一起～
|
1 |
; html-script: false ]A ~ B { color: pink; } |
|
1 2 3 |
; html-script: false ]<p>我是A</p> <span>我是B</span> <span>我是B的隔壁，我也可以變色了！</span> |
Attribute selectors-屬性選擇器分成以下幾種
1. 標籤內有屬性(attribute)的會一起套用（屬性不一定是title，例如alt也可以）：
|
1 |
; html-script: false ]p[title] { color: blue; } |
|
1 2 |
; html-script: false ]<p title="sentence">這裡會是藍色</p> <p>我沒有title</p> |
2. 屬性(attribute)以及值(value)兼具的時候套用：
|
1 |
; html-script: false ]p[title=xyz] { color: red; } |
|
1 2 |
; html-script: false ]<p title="xyz">我是紅色</p> <p title="abc">我是甚麼顏色</p> |
3. 屬性(attribute)內含部份值(value)的字元都可以套用，在屬性後面加條毛毛蟲跟著走～：
|
1 |
; html-script: false ]p[title~=xyz] { color: red; } |
|
1 2 3 |
; html-script: false ]<p title="xyz">我是紅色</p> <p title="abc xyz">這次我又是甚麼顏色呢</p> <p title="xyz abc">值在前後不受影響喔</p> |
4. 屬性(attribute)的起始值(value)完全符合才會套用，將屬性後面隔一道牆吧|：
|
1 |
; html-script: false ]p[title|=xyz] { color: red; } |
|
1 2 3 4 5 |
; html-script: false ]<p title="xyz">我是紅色</p> <p title="abc xyz">起始值不一樣所以沒變色</p> <p title="xyzabc">xyzabc不等於xyz</p> <p title="xyz abc">空白鍵隔開也不算</p> <p title="xyz-abc">但是-可以協助分隔</p> |
以上是今天的分享，明日預計是child系列！若有誤請指正，謝謝。
本文同步發表於http://ithelp.ithome.com.tw/question/10138109