css3屬性選擇器有多少種

小編給大家分享一下css3屬性選擇器有多少種，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出陽(yáng)朔免費(fèi)做網(wǎng)站回饋大家。

css3屬性選擇器包括3種：1、“E[att^=value]”選擇器，選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，屬性值包含前綴為value的子字符串；2、“E[att$=value]”選擇器；3、“E[att*=value]”選擇器。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。CSS3中新增了3種屬性選擇器：E[att^=value]、E[att$=value]和E[att*=value]，下面我們?cè)敿?xì)介紹。

E[att^=value]屬性選擇器

E[att^=value]屬性選擇器是指選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含前綴為value的子字符串。需要注意的是E是可以省略的，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。例如，div[id^=section]表示匹配包含id屬性，且id屬性值是以“section”字符串開(kāi)頭的div元素。

下面通過(guò)一個(gè)案例對(duì)E[att^=value]屬性選擇器的用法進(jìn)行演示，如下所示。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>E[att^=value]屬性選擇器的應(yīng)用</title>
        <style type="text/css">
            p[id^="one"]{
                color:pink;
                font-family: "微軟雅黑";
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p id="one">為了看日出，我常常早起。那時(shí)天還沒(méi)有大亮，周?chē)浅Ｇ屐o，船上只有機(jī)器的響聲。</p>
        <p id="two">天空還是一片淺藍(lán)，顏色很淺。轉(zhuǎn)眼間天邊出現(xiàn)了一道紅霞，慢慢地在擴(kuò)大它的范圍，加強(qiáng)它的亮光。我知道太陽(yáng)要從天邊升起來(lái)了，便目不轉(zhuǎn)睛地望著那里。</p>
        <p id="one1">果然過(guò)了一會(huì)兒，在那個(gè)地方出現(xiàn)了太陽(yáng)的小半邊臉，紅是真紅，卻沒(méi)有亮光。這個(gè)太陽(yáng)好像負(fù)著重荷似地一步一步、慢慢地努力上升，到了最后，終于沖破了云霞，完全跳出了海面，顏色紅得非?？蓯?ài)。一剎那間，這個(gè)深紅的圓東西，忽然發(fā)出了奪目的亮光，射得人眼睛發(fā)痛，它旁邊的云朵也突然有了光彩。</p>
        <p id="two1">有時(shí)太陽(yáng)走進(jìn)了云堆中，它的光線(xiàn)卻從云里射下來(lái)，直射到水面上。這時(shí)候要分辨出哪里是水，哪里是天，倒也不容易，因?yàn)槲揖椭豢匆?jiàn)一片燦爛的亮光。</p>
    </body>
</html>

在上述代碼中，使用了[att^=value]選擇器“p[id^="one"]”。只要p元素中的id屬性值是以“one”字符串開(kāi)頭就會(huì)被選中，從而呈現(xiàn)特殊的文本效果。

css3屬性選擇器有多少種

E[att$=value]屬性選擇器

E[att$=value]屬性選擇器是指選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含后綴為value的子字符串。與E[att^=value]選擇器一樣，E元素可以省略，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。例如，div[id$=section]表示匹配包含id屬性，且id屬性值是以“section”字符串結(jié)尾的div元素。

下面通過(guò)一個(gè)案例對(duì)E[att$=value]屬性選擇器的用法進(jìn)行演示，如下所示。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>E[att$=value] 屬性選擇器的應(yīng)用</title>
    <style type="text/css">
        p[id$="main"]{
            color: #0cf;
            font-family: "宋體";
            font-size: 20px;
        }
    </style>
</head>
    <body>
　       <p id="old1">盼望著，盼望著，東風(fēng)來(lái)了，春天的腳步近了。</p>
　       <p id="old2">小草偷偷地從土里鉆出來(lái)，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿(mǎn)是的。坐著，躺著，打兩個(gè)滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風(fēng)輕悄悄的，草綿軟軟的。</p>
　       <p id="oldmain">桃樹(shù)、杏樹(shù)、梨樹(shù)，你不讓我，我不讓你，都開(kāi)滿(mǎn)了花趕趟兒。紅的像火，粉的像霞，白的像雪?；ɡ飵е鹞叮]了眼，樹(shù)上仿佛已經(jīng)滿(mǎn)是桃兒、杏兒、梨兒！花下成千成百的蜜蜂嗡嗡地鬧著……</p>
　       <p id="newmain">“吹面不寒楊柳風(fēng)”，不錯(cuò)的，像母親的手撫摸著你。風(fēng)里帶來(lái)些新翻的泥土的氣息，混著青草味，還有各種花的香，都在微微潤(rùn)濕的空氣里醞釀。鳥(niǎo)兒將窠巢安在繁花嫩葉當(dāng)中，高興起來(lái)了……</p>
    </body>
</html>

在上述代碼中，使用到了[att$=value]選擇器“p[id$="main"]”。只要p元素中的id屬性值是以“main”字符串結(jié)尾就會(huì)被選中，從而呈現(xiàn)特殊的文本效果。

css3屬性選擇器有多少種

E[att*=value]屬性選擇器

E[att*=value]選擇器用于選擇名稱(chēng)為E的標(biāo)記，且該標(biāo)記定義了att屬性，att屬性值包含value子字符串。該選擇器與前兩個(gè)選擇器一樣，E元素也可以省略，如果省略則表示可以匹配滿(mǎn)足條件的任意元素。例如，div[id*=section]表示匹配包含id屬性，且id屬性值包含“section”字符串的div元素。

下面通過(guò)一個(gè)案例對(duì)E[att*=value]屬性選擇器的用法進(jìn)行演示，如下所示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value]屬性選擇器的使用</title>
<style type="text/css">
    p[id*="demo"]{
        color:#0ca;
        font-family: "宋體";
        font-size: 20px;
    }
</style>
</head>
    <body>
        <p id="demo1">我們消受得秦淮河上的燈影，當(dāng)四月猶皎的仲夏之夜?！?lt;/p>
        <p id="main1">在茶店里吃了一盤(pán)豆腐干絲，兩個(gè)燒餅之后，以至歪的腳步踅上夫子廟前停泊著的畫(huà)訪(fǎng)，就懶洋洋地躺到藤椅上去了。好郁蒸的江南，傍也還是熱的。"快開(kāi)船罷！"槳聲響了。</p>
        <p id="newdemo">小的燈舫初次在河中蕩漾;于我，情景是頗朦朧，滋味是怪羞澀的。我要錯(cuò)認(rèn)它作七里的山塘;可是，河房里明窗洞啟，映著玲瓏入畫(huà)的欄干，頓然省得身在何處了……</p>
        <p id="olddemo">又早是夕陽(yáng)西下，河上妝成一抹胭脂的薄媚。是被青溪的姊妹們所薰染的嗎？還是勻得她們臉上的殘脂呢？寂寂的河水，隨雙槳打它，終沒(méi)言語(yǔ)。密匝匝的繡恨逐老去的年華，已都如蜜餳似的融在流波的心窩里、連嗚咽也將嫌它多事，更哪里論到哀嘶……</p>
    </body>
</html>

在上述代碼中，使用了[att*=value]選擇器“p[id*="demo"]”。只要p元素中的id屬性值包含“demo”字符串就會(huì)被選中，從而呈現(xiàn)特殊的文本效果。

css3屬性選擇器有多少種

以上是“css3屬性選擇器有多少種”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：css3屬性選擇器有多少種
文章網(wǎng)址：http://muchs.cn/article34/pidgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、Google、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)

廣告

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

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司