新聞中心
本文向大家描述一下CSS樣式表中屬性選擇器四種格式的用法,或許你不應(yīng)該對屬性選擇器感到生疏,從本質(zhì)上說,id跟類選擇器其實就是屬性選擇器,只不過是選擇了id或者類的值(value)而已。

創(chuàng)新互聯(lián)建站的客戶來自各行各業(yè),為了共同目標(biāo),我們在工作上密切配合,從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位,感謝他們對我們的要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、做網(wǎng)站、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。
CSS樣式表中屬性選擇器四種格式
屬性選擇器(AttributeSelectors),或許你不應(yīng)該對屬性選擇器感到生疏,從本質(zhì)上說,id跟類選擇器其實就是屬性選擇器,只不過是選擇了id或者類的值(value)而已。
CSS樣式表中屬性選擇器的格式是元素后跟中括號,中括號內(nèi)帶屬性,或者屬性表達式(不知道描述是否正確,自創(chuàng)的詞),比如h1[title],h1[title="Logo"]等,你可以從我下面的論述中看到4種具體形式。
1、簡易屬性選擇器
只顧其名不顧其值,這是CSS樣式表中簡易屬性選擇器的特點。
h1[class]{color:silver;}將會作用于任何帶class的h1元素,不管class的值是什么。所以
當(dāng)然,這個“屬性”不僅僅是class或者id,可以是該元素所有合法屬性,比如img的alt,這樣img[alt]{cssdeclarationshere;}將會作用于任何帶有alt屬性的img元素。那么a[href][title]{font-weight:bold;}呢?聰明的你一定已經(jīng)知道,這會作用于同時帶href和title屬性的a元素,比如。
3、部分屬性值選擇器
CSS樣式表中部分屬性值選擇器如其名,只要屬性值部分匹配(這里的部分,實際上要匹配整個單詞)就會作用于該元素。讓我們來看個例子:
Whenhandlingplutonium, - caremustbetakentoavoidtheformationofacriticalmass.
- p[class~="warning"]{font-weight:bold;}
和
- p[class~="urgent"]{font-weight:bold;}
中任何一條都可以讓這個p的字體變粗。
該選擇器十分有用,比如你要樣式化插圖,其title中都含字符串”Figure”,如title="Figure5:xxx說明",則你可以使用img[title~="Figure"]。
需要注重的是,如我***句就強調(diào)的,你需要匹配的是整個單詞,img[title~="Figure"]不會匹配title="Figure5:xxx說明"。
另外,我做了個小小的測試,你把例子中的“Figure”改成“插圖”,把img[title~="Figure"]改成img[title~="插圖"],在Firefox中依然可以匹配,不管編碼(encoding)是GB2312還是UTF-8??磥鞢SS對中文的支持還不賴。
4、非凡屬性選擇器
CSS樣式表中這個選擇器有點怪,它是這樣工作的,舉個例子比描述更輕易。
*[lang|="en"]{color:white;},這條規(guī)則(rule)將會選擇屬性lang的值en或者en-打頭的元素。就是說,它可以匹配
本文題目:CSS樣式表中屬性選擇器四種格式
URL分享:http://www.dlmjj.cn/article/dhgohpo.html


咨詢
建站咨詢
