免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

CSS3中屬性選擇器新增加了什么特性

這篇文章主要介紹“CSS3中屬性選擇器新增加了什么特性”,在日常操作中,相信很多人在CSS3中屬性選擇器新增加了什么特性問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”CSS3中屬性選擇器新增加了什么特性”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供靈璧網(wǎng)站建設(shè)、靈璧做網(wǎng)站、靈璧網(wǎng)站設(shè)計(jì)、靈璧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、靈璧企業(yè)網(wǎng)站模板建站服務(wù),10余年靈璧做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

零、概覽
CSS2支持的屬性選擇器用一個(gè)表達(dá)式[{屬性 | 屬性 {= | |= | ~=} 值}]
1.[class="a"]只能匹配class="a"的元素
2.[class~="a"]則可以匹配class="a"、class="a b"的元素
3.[lang|=en]則可以匹配lang="en"、lang="en-us"的元素。

CSS3新增*=、^=、$=三種匹配方式[{屬性 | 屬性 {*= | ^= | $=} 值}]:
1.*=表示模糊匹配,[href="163"]可以匹配href="163.com"、href="mail.163.com"等元素;
2.^=表示以指定字符開頭,[href^="/"]則匹配href="/a/a.htm"、href="/b"的元素
3.$=表示以指定字符結(jié)尾,[scr$=".png"]則匹配所有png圖片,如src="logo.png"

CSS3的屬性選擇器主要包括以下幾種:
1.E[attr]:只使用屬性名,但沒有確定任何屬性值;
2.E[attr="value"]:指定屬性名,并指定了該屬性的屬性值;
3.E[attr~="value"]:指定屬性名,并且具有屬性值,此屬性值是一個(gè)詞列表,并且以空格隔開,其中詞列表中包含了一個(gè)value詞,而且等號(hào)前面的“?”不能不寫;
4.E[attr^="value"]:指定了屬性名,并且有屬性值,屬性值是以value開頭的;
5.E[attr$="value"]:指定了屬性名,并且有屬性值,而且屬性值是以value結(jié)束的;
6.E[attr*="value"]:指定了屬性名,并且有屬性值,而且屬值中包含了value;
7.E[attr|="value"]:指定了屬性名,并且屬性值是value或者以“value-”開頭的值(比如說zh-cn);

一、E[attr]:屬性選擇器是CSS3屬性選擇器中最簡(jiǎn)單的一種。如果你希望選擇有某個(gè)屬性的元素,而不論這個(gè)屬性值是什么,你就可以使用這個(gè)屬性選擇器:

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[id] {background: blue; color:yellow;font-weight:bold;}  

也可以使用多屬性進(jìn)行選擇元素,如E[attr1][attr2], 這樣只要是同時(shí)具有這兩屬性的元素都將被選中:

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[href][title] {background: yellow; color:green;}  

注:IE6不支持這個(gè)選擇器。

二、E[attr="value"]:指定了屬性值“value”

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}  

注:屬性和屬性值必須完全匹配,特別是對(duì)于屬性值是詞列表的形式時(shí),如:
    test

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[class="links"]{color:red};   

  2. .demo a[class="links item"]{color:red};  

    IE6不支持這個(gè)選擇器。

三、E[attr~="value"]:如果想根據(jù)屬性值中的詞列表的某個(gè)詞來進(jìn)行選擇元素,那么就需要使用這種屬性選擇器:E[attr~="value"],這種屬性選擇器是屬性值是一個(gè)或多個(gè)詞列表,如果是列表時(shí),他們需要用空格隔開,只要屬性值中有一個(gè)value相匹配就可以選中該元素,前面所講的E[attr="value"]是屬性值需要完全匹配才會(huì)被選中,他們兩者區(qū)別就是一個(gè)有“?”號(hào),一個(gè)沒有“?”號(hào)。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[title~="website"]{background:orange;color:green;}  

注:屬性選擇器中有波浪(?)時(shí)屬性值有value時(shí)就相匹配,沒有波浪(?)時(shí)屬性值要完全是value時(shí)才匹配。IE6不支持E[attr~="value"]屬性選擇器。

四、E[attr^="value"]:選擇attr屬性值以“value”開頭的所有元素,換句話說,選擇的屬性其以對(duì)應(yīng)的屬性值是以“value”開始的。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[href^="http://"]{background:orange;color:green;}  

注:IE6不支持E[attr^="value"]選擇器。

五、E[attr$="value"]:E[attr$="value"]屬性選擇器剛好與E[attr^="value"]選擇器相反,E[attr$="value"]表示的是選擇attr屬性值以"value"結(jié)尾的所有元素,換句話說就是選擇元素attr屬性,并且他的屬性值是以value結(jié)尾的,這個(gè)運(yùn)用在給你一些特殊的鏈接加背景圖片很方便的,比如說給pdf,png,doc等不同文件加上不同icon,我們就可以使用這個(gè)屬性來實(shí)現(xiàn).

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[href$="png"]{background:orange;color:green;}  

注:IE6不支持E[attr$="value"]屬性選擇器。

六、E[attr*="value"]:選擇attr屬性值中包含子串"value"的所有元素。也就是說,只要你所選擇的屬性,其屬性值中有這個(gè)"value"值都將被選中。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[title*="site"]{background:black;color:white;}  

注:IE6不支持E[attr*="value"]選擇器。

七、E[attr|="value"]:稱作為特定屬性選擇器。這個(gè)選擇器會(huì)選擇attr屬性值等于value或以value-開頭的所有元素。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .demo a[lang|="zh"]{background:gray;color:yellow;}  

注:常常用的地方是用來匹配語言,IE6不支持E[attr|="value"]選擇器。

注釋:
1.屬性選擇器除了IE6不支持外,其他的瀏覽器都能支持。
2.E[attr="value"]和E[attr*="value"]是最實(shí)用的,其中E[attr="value"]能幫我們定位不同類型的元素,特別是表單form元素的操作,比如說input[type="text"],input[type="checkbox"]等,而E[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件,比如說你的網(wǎng)站上不同的文件類型的鏈接需要使用不同的icon圖標(biāo),用來幫助你的網(wǎng)站提高用戶體驗(yàn),就像前面的實(shí)例,可以通過這個(gè)屬性給".doc",".pdf",".png",".ppt"配置不同的icon圖標(biāo)。

到此,關(guān)于“CSS3中屬性選擇器新增加了什么特性”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!

網(wǎng)頁(yè)題目:CSS3中屬性選擇器新增加了什么特性
標(biāo)題路徑:http://m.newbst.com/article4/ijhoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器外貿(mào)建站網(wǎng)站排名網(wǎng)站設(shè)計(jì)網(wǎng)站導(dǎo)航Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)