CSS 3 選取器解釋

來源:互聯網
上載者:User
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/



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。