首頁技術(shù)文章正文

css3屬性選擇器有哪些?css3屬性選擇器介紹

更新時(shí)間:2021-09-23 來源:黑馬程序員 瀏覽量:

屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。CSS3中新增了3種屬性選擇器:E[att^=value]、E[att$=value]E[att*=value],下面我們詳細(xì)介紹。

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

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

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

<!DOCTYPE html>
<html lang="en">
    <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í)天還沒有大亮,周圍非常清靜,船上只有機(jī)器的響聲。</p>
        <p id="two">天空還是一片淺藍(lán),顏色很淺。轉(zhuǎn)眼間天邊出現(xiàn)了一道紅霞,慢慢地在擴(kuò)大它的范圍,加強(qiáng)它的亮光。我知道太陽要從天邊升起來了,便目不轉(zhuǎn)睛地望著那里。</p>
        <p id="one1">果然過了一會兒,在那個(gè)地方出現(xiàn)了太陽的小半邊臉,紅是真紅,卻沒有亮光。這個(gè)太陽好像負(fù)著重荷似地一步一步、慢慢地努力上升,到了最后,終于沖破了云霞,完全跳出了海面,顏色紅得非??蓯?。一剎那間,這個(gè)深紅的圓東西,忽然發(fā)出了奪目的亮光,射得人眼睛發(fā)痛,它旁邊的云朵也突然有了光彩。</p>
        <p id="two1">有時(shí)太陽走進(jìn)了云堆中,它的光線卻從云里射下來,直射到水面上。這時(shí)候要分辨出哪里是水,哪里是天,倒也不容易,因?yàn)槲揖椭豢匆娨黄瑺N爛的亮光。</p>
    </body>
</html>

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

1632379195996_CSS3屬性選擇器.jpg

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

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

下面通過一個(gè)案例對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)來了,春天的腳步近了。</p>
        <p id="old2">小草偷偷地從土里鉆出來,嫩嫩的,綠綠的。園子里,田野里,瞧去,一大片一大片滿是的。坐著,躺著,打兩個(gè)滾,踢幾腳球,賽幾趟跑,捉幾回迷藏。風(fēng)輕悄悄的,草綿軟軟的。</p>
        <p id="oldmain">桃樹、杏樹、梨樹,你不讓我,我不讓你,都開滿了花趕趟兒。紅的像火,粉的像霞,白的像雪。花里帶著甜味,閉了眼,樹上仿佛已經(jīng)滿是桃兒、杏兒、梨兒!花下成千成百的蜜蜂嗡嗡地鬧著……</p>
        <p id="newmain">“吹面不寒楊柳風(fēng)”,不錯(cuò)的,像母親的手撫摸著你。風(fēng)里帶來些新翻的泥土的氣息,混著青草味,還有各種花的香,都在微微潤濕的空氣里醞釀。鳥兒將窠巢安在繁花嫩葉當(dāng)中,高興起來了……</p>
    </body>
</html>

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

1632379327666_CSS3屬性選擇器3.jpg

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

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

下面通過一個(gè)案例對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)四月猶皎的仲夏之夜。 </p>
        <p id="main1">在茶店里吃了一盤豆腐干絲,兩個(gè)燒餅之后,以至歪的腳步踅上夫子廟前停泊著的畫訪,就懶洋洋地躺到藤椅上去了。好郁蒸的江南,傍也還是熱的。"快開船罷!"槳聲響了。</p>
        <p id="newdemo">小的燈舫初次在河中蕩漾;于我,情景是頗朦朧,滋味是怪羞澀的。我要錯(cuò)認(rèn)它作七里的山塘;可是,河房里明窗洞啟,映著玲瓏入畫的欄干,頓然省得身在何處了……</p>
        <p id="olddemo">又早是夕陽西下,河上妝成一抹胭脂的薄媚。是被青溪的姊妹們所薰染的嗎?還是勻得她們臉上的殘脂呢?寂寂的河水,隨雙槳打它,終沒言語。密匝匝的繡恨逐老去的年華,已都如蜜餳似的融在流波的心窩里、連嗚咽也將嫌它多事,更哪里論到哀嘶……</p>
    </body>
</html>

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

1632379334974_CSS3屬性選擇器2.jpg



猜你喜歡:

CSS怎樣更換鼠標(biāo)樣式?

圓角矩形css怎么寫?

清除input默認(rèn)樣式

CSS中px、em、rem有什么區(qū)別和不同?

黑馬程序員HTML&JS+前端高手班

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!