CSS 3 選取器解釋

css Roger Johansson （這個老外彷彿是參與編訂 W3C 的傢伙）前幾天寫了一個關於CSS 3的文章： CSS 3 selectors explained 裡面說了去年12月份w3c最新制定的CSS 3的新標籤、新用法，我用機器翻譯看著也蠻爽的，把看得懂的摘錄下來，大家也學習一下先進經驗。呵呵~

在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在這種情況下將控制div#nav-primary 和div#nav-secondary。請大家注意，這兩個標籤前面都有 nav ，到底是以"-"做為分隔，還是把ID進行從前至後匹配就不得而知了 [sweat]

div[id$="primary"] { background:#ff0; }

注意是“$”
CSS在這種情況下將控制div#nav-primary 和div#content-primary。請大家注意，這兩個標籤後面都有 primar ，到底是以"-"做為分隔，還是把ID進行從後至前匹配也就不得而知了 [sweat]

div[id*="content"] { background:#ff0; }

注意是“*”
CSS在這種情況下將控制div#content-primary div#content-secondary 和div#tertiary-content。請大家注意，這些標籤都含有 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了，“[type="text"]”好象是表單裡type是text的吧。。。那type="password"會是啥呢？

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/