教學 | CSS選擇器概略說明
之前在寫css教學的時候，在「不可不知篇」裡頭曾經提到id以及class的差異。其實css選擇器的範圍是很廣泛的，id.class這種屬性只佔了其中一小部分，為了怕大家以為css裡頭只有id.class的存在，所以我特地將css 2.1版的選擇器做一個概略說明，希望讀完這篇大家對於css的運用能更加靈活
根據W3C網站公佈的css 2.1 selector syntax可以得知目前有10類不同的選擇器：
1.Universal selector (通用選擇器)
使用字元「*」，代表此張網頁都要套用*{}底下的設定。
2.Type selectors (屬性選擇器)
在html文件裡，他的標籤可以直接當做css裡頭的選擇器。例如<h1>...</h1>，<p>...</p> 等等，可以直接寫成:
h1 {color:red;}
p{color:black;}
3.Descendant selectors (後代選擇器)
當某一段文字被兩個以上的選擇器包圍時，我們可以用這些選擇器彼此之間的關係來替文字做更進一步的樣式化。
<style>
h1 a {color:red} /*選擇器依序從外而內，單獨設定在h1底下的a選擇器。兩個選擇器之間用空白鍵做分隔。*/
a {color:black}
</style>
<div>
<h1><a href="http://xxx">同時被h1以及a這兩個選擇器包圍，我的連結顏色為紅色</a></h1>
<a href="http://xxx">只被a這個選擇器包圍，我的連結顏色為黑色<;/a>
</div>
4.Child selectors (子選擇器)
子選擇器有一種繼承的概念，你可以把它想成父子的關係，子一定要緊緊跟著父跑，要是中間插入任何一個元素，就不是父子關係了。 而子選擇器我們使用「>」符號，舉例如下:
<style>
div > #child {color:red}
</style>
<div>
<p>
<span id="child">我和div中間有個p，所以不會變色</span>
</p>
</div>
<div>
<span id="child">我緊緊跟著div，所以會變色</span>
</div>
5.Adjacent sibling selectors (相鄰選擇器)
如果說子選擇器是上下垂直的繼承概念，那麼相鄰選擇器就是左右平行的對等概念，而他使用的符號是「+」，只是我們很少用到這個寫法，其中一個原因是IE瀏覽器尚未支援。
我個人認為，相鄰選擇器使用的最好時機在於要對同個標籤進行不同的設置。假設今天我有三個段落都要使用h1標籤，可是我希望三個段落擁有不同的顏色(黑色、紅色、綠色)，我可以這樣寫:
<style>
h1 + h1 {color:red}
h1 + h1 + h1 {color:green}
</style>
<h1>段落一</h1>
<h1>段落二</h1>
<h1>段落三</h1>
6.Attribute selectors (屬性選擇器)
顧名思義，就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型，分別為:
h2[class] //符合所有含class的h2標籤即可
h2[class=title] //符合含class=title的h2標籤
h2[class~=title] //只要calss裡頭有包含title文字的h2標籤即可
h2[class|=title] //class的開始值必須為title的h2標籤
7.Class selectors (Class選擇器)
使用「.」符號做宣告，後頭的屬性可以自己命名，一張網頁可以出現多個相同的class屬性值。
<style>
.value{color:red}
</style>
<div class="value">紅色文字</div>
8.ID selectors (ID選擇器)
使用「#」符號做宣告，後頭的屬性值可以自己命名，但是一張網頁僅能出現一次相同的ID (ID為唯一)
<style>
#value{color:red}
</style>
<div id="value">紅色文字</div>
9.Pseudo-classes (偽類)
偽類選擇器也許大家很少聽過，但是一說到a:link、a:visited、a:hover、a:active這四個css應該就不陌生了吧，這四個選擇器都是屬於偽類的一種喔。另外還有 :first-child , :foucs , :lang 這三種。
X:first-child 符合父標籤中的第一個X標籤者才會有效用
<style>
p:first-child { color:red}
</style>
<P> 此段會變紅色</p>
<P> 此段不會變色</p>
X:lang(E) 符合lang為E的X標籤
<style>
p:lang(fr) {color:red}
</style>
<body>
<p lang="fr">紅色</p>
<p lang="en">不會變色</p>
</body>
10.Pseudo-elements (偽元素)
偽元素包含 :first-line 以及 :first-letter。
X:first-line 符合X標籤的第一行都會受影響
<style>
p:first-line {color:red}
</style>
<body>
<p>第一行變紅色<br />
第二行不變色</p>
</body>
X:first-letter 符合X標籤的第一個字母會受影響
<style>
p:first-letter {color:red}
</style>
<body>
<p>首字變色<br />第二行</p>
</body>
(IE瀏覽器沒有支援所有的偽類以及偽元素)
CSS選擇器到此告一段落。這篇文章寫了兩天，一直在想要怎麼寫大家才可以更瞭解css，所以有看到最後的朋友，請受我一拜(笑)。因為這篇文章旨在概略說明，我只講大觀念，更細的東西幾乎都跳過了，所以如果你們希望哪一塊可以講的更詳細，請在底下投票讓我知道，我會優先考慮細講那一部分:)
Loading ...
第2項的部份
記得標籤選擇器是不用加.的 例:
h1 {color:red;}
加了.反而會變成第7項的class選擇器
因為其他部份都沒有出錯, 所以應該是一時筆誤吧
@ Ayukawayen
謝謝你唷!!
已經更正了XDD
(打太順手了 噗)
我有看完, 但是不用拜我...
有問題請教, 這段的例子我看不太懂:
.Child selectors (子選擇器)
div > #child {color:red}
我是什麼色?
我呢?
我和div中間有個p，所以不會變色
如果我把例子改成上面這樣, 請問哪些字應該有顏色呢?
大於小於會被吃掉, 換一個:
<style>
div > #child {color:red}
</style>
<div>我是什麼色?
<p>我呢?
<span id="child">我和div中間有個p，所以不會變色</span>
</p>
</div>
span 的 id="child" 是不是應該搬到 div 後面?
可是這樣大家都有顏色, 不管是在 p 還是 span 裡面...
請指導一下吧, 謝謝~
@ mania
啊!
我終於弄懂了, 妳可以不用理我了~
不好意思打擾了...
@ mania
噗哈
弄懂就好，真的弄懂了齁XD?
我有看，但是我只想懂一兩種阿
這兩個說錯了耶 XDDDD
前者可以符合 或 之類的
但不會符合 喔 ~
class 屬性是 "以半形空白隔開的列表"，而列表的項目中
"有其中一個完全符合 title" 才會被 [class~=title] 取得
至於後者，則會符合 或 之類的
只要 dash ( - ) 符號前面符合即可 ＠＠"
啊啊，抱歉，我忘記 HTML 會被過濾掉 XDDD
我剛才是說：
這兩個說錯了耶 XDDDD
前者可以符合 <h2 class="title a b c"> 或 <h2 class="d title e"> 之類的
但不會符合 <h2 class="title123"> 喔 ~
class 屬性是 "以半形空白隔開的列表"，而列表的項目中
"有其中一個完全符合 title" 才會被 [class~=title] 取得
至於後者，則會符合 <h2 class="title a b c"> 或 <h2 class="d title-123 e"> 之類的
只要 dash ( - ) 符號前面符合即可 ＠＠"
@ 風痕影
謝謝你
我會再研究一下~
感恩:)
Q1:請問一下在後代選取器,你解釋的這段話=>當某一段文字被"兩個以上的選擇器"包圍時,兩個以上的選擇器是指兩種以上的選擇器嗎?如果是的話,那兩個以上,同一種選擇器,是無法show效果囉
Q2:如何判別要使用後代選擇器和子選擇器?
ps:我的見解=>後代選取器可以延伸到子孫輩
子選擇器只能延伸到子輩
不知道我說的對不對....?
不好意思問了這麼多問題,麻煩了!!
@alex
A1.就像是我底下的範例，一段文字被兩個選擇器器包住就會產生前-後代的關係。至於你所說的「兩個以上，同一種選擇器」應該是不會發生這種情形，因為也沒必要這樣設定...
像我範例給的＜h1＞＜/h1＞，沒有人會寫成＜h1＞＜h1＞＜/h1＞＜/h1＞
A2.子選擇器有「繼承」的觀念，父與子中間不能有其他語法插入。
謝謝,我大致上了解
[...] 這邊要先跟各位說明，css的語法跟選擇器是兩種不同的東西，比如以下這段css： a:hover { font-size:11px; line-height:180%; } a:hover 是css選擇器。裡頭標藍色字體，由 { }包住的則是css語法。對css選擇器不熟或想進一步瞭解的朋友，可以參考我之前寫的CSS選擇器概略說明。 [...]
很棒的解釋!!拍手拍手!!
MUKI好厲害喔！我網路上的CSS還沒教這麼詳細的說，訂閱到GOOGLE閱讀器。
受教了,寫得很深入