除了inline style ( 就是直接在 元素上寫 style="") 之外 , 其餘的都是要設定一個明確的目標來告訴瀏覽器,現在這個CSS要套在哪個元素上。
而選擇器(Selector) 就是用來設定CSS語法要套用的目標。 舉個常見的例子
<style>
.bigFont
{
font-size:20px;
}
</style>
<div class="bigFont">I am big</div>
.bigFont 就是選擇器的其中一種, Class selectors（類別選擇器）
當然還有許許多多的選擇器 W3C 把選擇器分成2類
1.簡單選擇器 （Simple selectors）
1-1. Class selectors（類別選擇器）
1-2. ID selectors（ID選擇器）
1-3. Type selectors（型態選擇器）
1-4. Universal selector（通用選擇器）
1-5. Attribute selectors（屬性選擇器）
2.複合選擇器（Combinators）
就是可以結合多個簡單選擇器來作進一步的篩選
2-1. Descendant combinator（後代選擇器）
2-2. Child combinator（子選擇器）
2-3. Adjacent sibling combinator（同層相鄰選擇器）
2-4. General sibling combinator（同層全體選擇器）
2-5. Groups of selectors（群組選擇器）
2-6. Pseudo-classes（偽類選擇器）
2-7. Pseudo-elements（偽元素選擇器）
1-1. Class selectors（類別選擇器）
以 . 開頭套用在 tag 屬性為 class 相同的元素們上
<style>.bigFont{font-size:20px;}</style><div class="bigFont">I am big</div><div class="bigFont">I am big too</div>
1-2. ID selectors（ID選擇器）
以 # 開頭套用在 tag 屬性為 id 相同的元素上
<style>#big{font-size:20px;}</style><div id="big">I am big</div>
1-3. Type selectors（型態選擇器）
直接設定HTML的標籤，畫面上所有相同的HTML元素都會套用。
<style>div{font-size:20px;}</style><div>I am big</div>
1-4. Universal selector（通用選擇器）
只有一個 * 會套用在所有的元素上
<style>*{font-size:20px;}</style><div>I am big</div>
1-5. Attribute selectors（屬性選擇器）
用在元素的屬性上,有很多種條件可以選擇, 以 [ 開頭跟 ] 結尾
1.[att] 套用在有包含 att 屬性的元素上,不管內容是什麼,只要有這個屬性就套用
<style>[attr]{font-size:20px;}</style><div attr="Value">I am big</div>2.[att=val] 套用在有包含 att 屬性的元素且值等於val的元素中
<style>[attr="big"]{font-size:20px;}</style><div attr="big">I am big</div>3.[att~=val] 套用在有包含 att 屬性的元素且值包含在val的元素中
<style>[attr ~= "median"]{font-size:20px;}</style><div attr="big median small">I am big</div>4.[att^=val] 套用在有包含 att 屬性的元素且值以val開頭(prefix)的元素中
<style>[attr^="b"]{font-size:20px;}</style><div attr="big">I am big</div>5.[att*=val] 套用在有包含 att 屬性的元素且val為屬性值子字串(substring)的元素中
<style>[attr*="ig"]{font-size:20px;}</style><div attr="big">I am big</div>6.[att$=val]套用在有包含 att 屬性的元素且值以val結尾(Suffix)的元素中
<style>[attr$="ig"]{font-size:20px;}</style><div attr="big">I am big</div>
2-1. Descendant combinator（後代選擇器）
E F, 以空白分隔2個選擇器,表示會套用在E元素裡所有的F元素
<style>.red span{font-color:red;}</style><div class="red"><span>我是紅色</span><p><span>我是紅色</span></p></div>
2-2. Child combinator（子選擇器）
E > F, 以 > 符號分隔2個選擇器,表示會套用在F元素是E元素的子代,如果E跟F中間還有其他的元素就不是子代了
<style>.red > span{font-color:red;}</style><div class="red"><span>我是紅色</span><p><span>我是黑色</span></p></div>
2-3 Adjacent sibling combinator（同層相鄰選擇器）
E + F, 以 + 符號分隔2個選擇器,表示會E跟F如果在同一層而且F為E的下一個元素就會被套用
<style>.red + span{font-color:red;}</style><div class="red"></div><span>我是紅色</span><span>我是黑色</span>
2-4. General sibling combinator（同層全體選取器）
E ~ F，以 ~ 符號分隔2個選擇器，表示在與E元素同一層的F元素都會被套用
<style>.red ~ span{font-color:red;}</style><div class="red"></div><span>我是紅色</span><p>我是黑色</p><span>我是紅色</span>
2-5. Groups of selectors（群組選擇器）
E , F，以 , 符號分隔2個選擇器，表示在與E跟F元素都會被套用
<style>.red , span{font-color:red;}</style><div class="red"></div><span>我是紅色</span><p>我是黑色</p><span>我是紅色</span>
2-6. Pseudo-classes（偽類選取器）
有底下這麼多種 , 最常看到的就是 a:hover a:visited 這種, 就不一一介紹了
:active 滑鼠按下的樣式
:first-child 第一個元素的樣式
:focus 目標為焦點的樣式
:hover 滑鼠移入的樣式
:lang(C) 當語言為C的樣式
:link 連結平常的樣式
:visited 連結過的元素的樣式
2-7. Pseudo-elements（偽元素選取器）
:first-line 元素的第一行會套用
:first-letter 元素的第一個字母會套用
參考資料
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx 這個連結有列出IE不同版本及不同CSS版本之間的支援狀況,而且還有範例, 很值得參考
留言列表
