淺談CSS4選擇器的新特性及其應(yīng)用

摘 要：在眾多的Web前端開發(fā)者還陶醉在CSS3帶來的驚喜中時，CSS4又粉墨登場，帶來更簡潔、更豐富的眾多新特性。在CSS4中對選擇器的定義引進了許多的新變化，本文列舉CSS4選擇器的一些新特性及其應(yīng)用。

關(guān)鍵詞：CSS4；選擇器；定義規(guī)則

中圖分類號：TP392 文獻標(biāo)識碼：A 文章編號：1674-7712 （2014） 22-0000-01

視覺能夠帶來的震撼是很難抵擋的。很難想象，如果沒有CSS，網(wǎng)頁效果會處在怎樣的刀耕火種時代。CSS是網(wǎng)頁設(shè)計師和開發(fā)人員之間的最佳橋梁，每當(dāng)有新CSS規(guī)范出現(xiàn)都令人興奮，一起來看看新的CSS將讓瀏覽器帶給我們哪些新的感受。本文介紹了關(guān)于CSS4選擇器定義的一些新特性，下面將重點介紹它們。

一、CSS4選擇器新特性

（一）父元素 $E>F。CSS終于有了與DOM一樣的父選擇器。這個選擇器將會把樣式顯示在包含有F的$E上。用$符表示父選擇器：

（二）ID匹配 E/foo/F。用雙斜桿（//）包含HTML屬性名。E/foo/F表示選中的所有頁面中所有F里ID值與E元素的foo屬性值相等的。

（三）匹配：matches。div：matches（s1，s2） 所有div匹配s1和s2的時候，這個div應(yīng)用樣式。比如我們想在label在hover狀態(tài)的時候，所對應(yīng)有input邊（四）鏈接相關(guān)：any-link：local-link。：any-link匹配任何鏈接，：local-link匹配任何本地鏈接。：local-link（n）可以加參數(shù)，n表示鏈接path/（目錄的級數(shù)），從序數(shù)0起算。官方文檔描述得不是很清楚。像a 和：any-link其實是一樣的，而div：any-link呢？應(yīng)該是擁有src/href值的div被選中：local-link看起來更有用。

（五）狀態(tài)：current：pass：future。是在頁面的有時間線的canvas，video，audio，屏幕閱讀等的內(nèi)容上應(yīng)用樣式：

：pass表示時間線上的前一個元素，如果不在時間線內(nèi)，則指其前一個元素（相當(dāng)于DOM的 prevSibling）。：future表示時間線上的后一個元素，如果不在時間線內(nèi)，則指其后一個元素（相當(dāng)于DOM的nextSibling）。

（六）方向：dir。根據(jù)HTML屬性選中。比如選中

，如代碼：p：dir（rtl）{color：#888；}

（七）默認選項：default。選中多個子元素中的默認元素。比如select中的默認option，允許有多個：default。比如在允許多選的select中，有多個：default元素。

（八）表單限制：required：optional。表單項中必處理項與可選項，說的就是HTML5中的這個required 屬性。

（九）可讀可寫：read-write：read-only。大部分元素都是可讀不可寫的，所以都是：read-only；像text input這些值可以改變的，和HTML5中設(shè)置了contenteditable的元素其本身是可改變的，這些被認為是具有寫屬性的，所以是：read-write

二、結(jié)束語

以上就是CSS4選擇器更新的內(nèi)容，業(yè)界人士表示這些更新內(nèi)容很多都比較實用，對于父選擇器和匹配選擇器的更新很期待。而對于一些規(guī)范描述不太清楚的，可以先了解了解就可以了。

參考文獻：

[1]吳慶濤，劉超慧，聶榮.HTML5—下一代Web開發(fā)標(biāo)準(zhǔn)的核心技術(shù)探討[J].許昌學(xué)院學(xué)報，2011（05）.

[2]何麗.基于CSS3.0技術(shù)的網(wǎng)頁元素效果[J].軟件導(dǎo)刊，2011（08）.

[作者簡介]趙順勇（1985-），男，浙江溫州人，助理實驗師，研究方向：網(wǎng)站開發(fā)。

[基金項目]浙江省高職教育研究會2013年研究課題，信息化環(huán)境下“微課程”資源建設(shè)與研究---以靜態(tài)網(wǎng)頁設(shè)計課為例。寧波職業(yè)技術(shù)學(xué)院2014年度教育教學(xué)改革與建設(shè)研究課題（慕課）《靜態(tài)網(wǎng)頁設(shè)計》。