6.Selector (選擇器)

一、Selector 介紹

1. E[foo] (CSS2) 簡單屬性選擇器
   選擇含有該屬性的元素
   範例6-1
   
2. E[foo="bar"] (CSS2) 精確屬性選擇器
   選擇與該屬性值相等的元素
3. E[foo~="bar"] (CSS2) 部份屬性選擇器
   選擇含有該屬性值的元素(屬性中的值是空格隔開的列表)
4. E[foo^="bar"] 起始字串屬性選擇器
   選擇屬性值字串起始相同的元素
5. E[foo$="bar"] 結尾字串屬性選擇器
   選擇屬性值字串結尾相同的元素
6. E[foo*="bar"] 任意字串屬性選擇器
   選擇屬性值有部份字串相同的元素(不需以空格隔開)
7. E + F (CSS2) 及 E ~ F
   選擇與E直接相鄰(+)的兄弟元素F， 及選擇位於E後面不論是否相鄰(~)的兄弟元素F
   範例6-2
8. :first-child (CSS2) 及 :first-of-type
   選擇第一子元素，及只計算同類的第一子元素
9. :last-child 及 :last-of-type
   選擇最後子元素，及只計算同類的最後子元素
10. :nth-child(n) 及 :nth-of-type(n) (n由0開始算起)
    選擇第nth元素，及只計算同類的第nth元素
11. :nth-last-child(n) 及 :nth-last-of-type(n)
    由後往前計算，選擇第nth元素，及只計算同類的第nth元素
12. :only-child 及 :only-of-type
    選擇唯一子元素(沒有兄弟)， 及只計算同類的唯一子元素(可能有兄弟，但是是子元素中的唯一類)
13. :target、:empty、:root、:not
    target：URI中指向特定ID的錨點，如 #last-comment:target {…}
    empty：沒有子元素的元素
    root：html document的根元素，如html:root(即 :root)
    not：否定條件，如 p:not(:first-child) {…}
    範例6-3
14. :checked、:disabled、:enabled
    checked:：有勾核的元素，如input[type=’checkbox’]:checked
    disabled：不可使用的元素，如input[type=’text’]:disabled
    enabled：可使用的元素，如input[type=’text’]:enabled
    範例6-4
15. ::first-line、::first-letter、::after、::before
    first-line：第一行
    first-letter：第一個字元
    after：現有元素的內容結尾處
    before：現在元素的內容起始處
    範例6-5
16. 十六、 其餘selector語法，可參閱 CSS Selector語法總覽
17. 練習6-1： 如果想讓鏈結(http://, ftp:// mailto:)或特定檔案下載(.pdf)等能在右邊呈現相對應的提示小圖，您會用哪些選擇器呢？
18. 練習6-2： 如果想讓表格能在偶數行(even)的背景呈現灰色，該用哪個選擇器呢？