CSS3 新增選擇器

CSS3的Selector可說是非常完備，除了Level 1及Level 2既有的Selectors之外，Level 3定義了幾個非常好用的Selector，以下所列的Selectors只有在CSS3的版本中：
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:disabled
E:checked
E:not(s)
E ~ F

如果能善加利用這些Selectors那對於CSS的操作會更加簡便有效率，以下就來說明這些Selectors如何運用。(browser必須有支援CSS3才能正確顯示，若想知道目前有哪些browser有支援CSS3請參閱When can I use…)
1. 屬性選擇器 (Attribute Selectors)
E[foo^="bar"] 屬性foo的值字串中，開頭為bar字串的所有特定元素
範例一
E[foo$="bar"] 屬性foo的值字串中，結尾為bar字串的所有特定元素
範例二
E[foo*="bar"] 屬性foo的值字串中包含bar字串的所有特定元素
範例三
2. 結構性的偽類別 (Structural pseudo-classes)
:root 位於文件根所有特定元素
範例四
E:nth-child(n) 父元素下的第n個子特定元素
範例五
範例五中的:nth-child(3n+1)，其中3n+1表示n從0開始遞增，所以也就是第1，4，7個元素符合條件。
另外:nth-child(n)，n除了上面用法外，也可以使用odd(表示奇數), even(表示偶數)帶入，例如：
範例六
E:nth-last-child(n) 父元素下倒數第n個子特定元素
範例七
E:nth-of-type(n) 第n個同層級特定元素
範例八
E:nth-last-of-type(n) 倒數第n個同層級特定元素
範例九
E:last-child 父元素下的最後一個特定元素
範例十
E:first-of-type 第一個同層級特定元素
範例十一
E:last-of-type 最後一個同層級特定元素
範例十二
E:only-child 父元素下只有一個子元素的特定元素
範例十三
E:only-of-type 沒有其他同層級元素的特定元素
範例十四
E:empty 沒有子元素的特定元素
範例十五
3. 目標偽類別 (The target pseudo-class)
E:target URI指向某元素的特定元素
範例十六
4. 使用者介面元素狀態偽類別 (The UI element states pseudo-classes)
E:enabled 元素狀態為enabled的特定使用者介面元素
範例十七
E:disabled 元素狀態為disabled的特定使用者介面元素
範例十八
E:checked 元素狀態為checked的特定使用者介面元素
範例十九
5. 否定偽類別 (The negation pseudo-class)
E:not(s) 元素非選擇器s的特定元素
範例二十
6. 一般同層級組合 (General sibling combinator)
E ~ F 與E元素有相同父元素的所有特定F元素