|
子串匹配的屬性選擇符
這一組的選擇符都新加的，他允許開發(fā)者對屬性中的子字符串來進(jìn)行匹配。
假設(shè)HTML文檔中包含下面的代碼結(jié)構(gòu)：
<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>
通過使用子串匹配的屬性選擇符就可以找到文檔中這些結(jié)構(gòu)性的特定組合。
下面的規(guī)則將為id以“nav”開頭的div元素設(shè)定背景顏色：
div[id^="nav"] { background:#ff0; }
上例中選擇符會匹配div#nav-primary和div#nav-secondary。
要找到id以primary結(jié)尾的div元素，可以使用下面的規(guī)則：
div[id$="primary"] { background:#ff0; }
這時選擇符將匹配div#nav-primary和div#content-primary。
下面的規(guī)則將會匹配到id中含有content子字符串的的div中：
div[id*="content"] { background:#ff0; }
受影響的元素有：div#content-primary、div#content-secondary和div#tertiary-content。
子串匹配的屬性選擇符已經(jīng)在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用，但是如果IE中還不支持的話，我們最好還是先不要使用他們（作者在寫這篇文章時IE還在開發(fā)中，如今IE7、IE8都支持這些選擇符，dudo注）。
目標(biāo)偽類
含有識別標(biāo)識的url（一個#后面緊跟錨點名稱或者元素的id）指向的是文檔中的特定元素。鏈向其他目標(biāo)元素的這些元素就可以使用:target偽類來修飾它。如果當(dāng)前的URL中沒有任何的片斷識別標(biāo)識，:target偽類將不會匹配任何元素。
還是以上面提到的代碼結(jié)構(gòu)為例，如果URL中包含content-primary標(biāo)識時，現(xiàn)在的規(guī)則將會在他外圍增加一個邊框：
div#content-primary:target { outline:1px solid #300; }
URL是類似這樣的形式的：
http://www.example.com/index.html#content-primary。
基于Mozilla和Safari的瀏覽器已經(jīng)支持:target偽類。
UI元素狀態(tài)偽類
:ENABLED偽類和:DISABLED偽類
在瀏覽器允許改變表單控件外觀的前提下，:enabled偽類和:disable偽類允許開發(fā)者指定用戶界面中可用和不可用元素（表單元素）的顯示樣式。下面的規(guī)則將會根據(jù)單行輸入框是否可用設(shè)定不同的背景顏色：
input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 詳解CSS3中的屬性選擇符 [1] 下一頁 詳解CSS3中的屬性選擇符 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 詳解CSS3中的屬性選擇符 [2]
