在CSS 3裡，假設你做了一個包含以下標籤結構的HTML檔:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
然後呢，在CSS文件裡
div[id^="nav"] { background:#ff0; }
注意是“ ^ ”
CSS在這種情況下將控制[u]div#nav-primary 和div#nav-secondary[/u]。請大家注意，這兩個標籤前面都有 nav ，到底是以"-"做為分隔，還是把ID進行從前至後匹配就不得而知了[sweat]
div[id$="primary"] { background:#ff0; }
注意是“ $ ”
CSS在這種情況下將控制[u]div#nav-primary 和div#content-primary[/u]。請大家注意，這兩個標籤後面都有primar ，到底是以"-"做為分隔，還是把ID進行從後至前匹配也就不得而知了[sweat]
div[id*="content"] { background:#ff0; }
注意是“ * ”
CSS在這種情況下將控制[u]div#content-primary div#content-secondary 和div#tertiary-content[/u]。請大家注意，這些標籤都含有content ，到底是以"-"做為分隔，還是把ID自動掃描後匹配就更不得而知了[sweat]
好像作者說這幾個標籤現在除了IE不支持，其它最新版的各種瀏覽器都支持了，大家可以一試，我就不試了~ [lol]
div#content-primary:target { outline:1px solid #300; }
注意那個“ :target ”
CSS在這種情況下將控制http: //www.example.com/index.html #content-primary這個錨鏈接（錨鏈接差不多可以理解就是一個網頁內的鏈接，比較在有些網頁看到的回到頂部）
作者說現在Mozilla 和Safari瀏覽器支援這個
input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }
注意那個“ [type="text"]:enabled ”
這就是控製表單的CSS了，「[u][type="text"][/u]」好像是表單裡type是text的吧。 。 。那[u]type="password"[/u]會是啥呢？
input:checked { border:1px solid #090; }
注意那個“ :checked ”
這個就是控製表單的「選擇」的CSS了。 。 。
作者說現在Opera和Mozilla瀏覽器支援這些
:root { background:#ff0; }
html { background:#ff0; }
大家注意那個“ :root ”
這個「:root」是比html 還要高一級的標籤，這個大家可以看一葉千鳥寫的正確認識html與body 他在文中發現了原來html 外面還有個框，嘿嘿~
作者說現在Mozilla 和Safari瀏覽器支援這個
接下來的:nth-child()就比較有趣了，呵呵~在括號裡可以放數字和預設的字母~
p:nth-child(3) { color:#f00; }
這個意思好像是說以第一個出現的P 為基礎，只要是「3」的倍數的全部P 都會被控制~
p:nth-child(odd) { color:#f00; }
這個意思好像是說以第一個出現的P 為基礎，然後奇數目的全部P 都會被控制~
p:nth-child(even) { color:#f00; }
這個意思好像是說以第一個出現的P 為基礎，然後偶數目的全部P 都會被控制~
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
這兩個標籤是等效的，因為第一個後面的0級沒沒起作用，他的意思就是3倍於第一個出現的P 的P 都會被控制~（好繞口啊，HOHO~ [ rolleyes] ）也就是說這個「n」 會從0.1.2.3.4.5.6....一直取值下去~算出來多少就是多少的P 都會被控制。 。 。
tr:nth-child(2n+11) { background:#ff0; }
這個如果大家理解上面的了，這個也不難理解，不過他控制的標籤變成了“tr” 這就是說表格會變得更加變化多端，感覺大家一定要小學算數得好，學得不好得快快回家再學一學小學算數去。 。 。 （不過，這樣的標籤是不是加重了電腦處理的效率呢？[confused] 希望我的但心是多餘的。。。）
p:last-child { background:#ff0; }
在p 之前的一個p 被控制（NND，p來p去的，打pp [sweat] ）
:not(p) { border:1px solid #ccc; }
這個p不被控制，自已用自帶的樣式的意思吧，應該是和前面的那些一起用才是。 。 。
p ~ ul { background:#ff0; }
ul 優先於p 顯示，這是咋個優先法，不清楚。 。 。
基本上我看得懂的就這些了，大家可以到下面兩個網址接著學習，我有什麼說錯了，記得告訴我啊
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/