之前在寫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 ...
...
EVERYBODYs COMMENT:
LEAVE YOUR COMMENT: