溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3屬性選擇器有多少種，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css3屬性選擇器包括3種：1、“E[att^=value]”選擇器，選擇名稱為E的標記，且該標記定義了att屬性，屬性值包含前綴為value的子字符串；2、“E[att$=value]”選擇器；3、“E[att*=value]”選擇器。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。CSS3中新增了3種屬性選擇器：E[att^=value]、E[att$=value]和E[att*=value]，下面我們詳細介紹。
E[att^=value]屬性選擇器
E[att^=value]屬性選擇器是指選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含前綴為value的子字符串。需要注意的是E是可以省略的，如果省略則表示可以匹配滿足條件的任意元素。例如，div[id^=section]表示匹配包含id屬性，且id屬性值是以“section”字符串開頭的div元素。
下面通過一個案例對E[att^=value]屬性選擇器的用法進行演示，如下所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value]屬性選擇器的應用</title>
<style type="text/css">
p[id^="one"]{
color:pink;
font-family: "微軟雅黑";
font-size: 20px;
}
</style>
</head>
<body>
<p id="one">為了看日出，我常常早起。那時天還沒有大亮，周圍非常清靜，船上只有機器的響聲。</p>
<p id="two">天空還是一片淺藍，顏色很淺。轉眼間天邊出現了一道紅霞，慢慢地在擴大它的范圍，加強它的亮光。我知道太陽要從天邊升起來了，便目不轉睛地望著那里。</p>
<p id="one1">果然過了一會兒，在那個地方出現了太陽的小半邊臉，紅是真紅，卻沒有亮光。這個太陽好像負著重荷似地一步一步、慢慢地努力上升，到了最后，終于沖破了云霞，完全跳出了海面，顏色紅得非常可愛。一剎那間，這個深紅的圓東西，忽然發出了奪目的亮光，射得人眼睛發痛，它旁邊的云朵也突然有了光彩。</p>
<p id="two1">有時太陽走進了云堆中，它的光線卻從云里射下來，直射到水面上。這時候要分辨出哪里是水，哪里是天，倒也不容易，因為我就只看見一片燦爛的亮光。</p>
</body>
</html>在上述代碼中，使用了[att^=value]選擇器“p[id^="one"]”。只要p元素中的id屬性值是以“one”字符串開頭就會被選中，從而呈現特殊的文本效果。
E[att$=value]屬性選擇器
E[att$=value]屬性選擇器是指選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含后綴為value的子字符串。與E[att^=value]選擇器一樣，E元素可以省略，如果省略則表示可以匹配滿足條件的任意元素。例如，div[id$=section]表示匹配包含id屬性，且id屬性值是以“section”字符串結尾的div元素。
下面通過一個案例對E[att$=value]屬性選擇器的用法進行演示，如下所示。
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value] 屬性選擇器的應用</title>
<style type="text/css">
p[id$="main"]{
color: #0cf;
font-family: "宋體";
font-size: 20px;
}
</style>
</head>
<body>
<p id="old1">盼望著，盼望著，東風來了，春天的腳步近了。</p>
<p id="old2">小草偷偷地從土里鉆出來，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿是的。坐著，躺著，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風輕悄悄的，草綿軟軟的。</p>
<p id="oldmain">桃樹、杏樹、梨樹，你不讓我，我不讓你，都開滿了花趕趟兒。紅的像火，粉的像霞，白的像雪。花里帶著甜味，閉了眼，樹上仿佛已經滿是桃兒、杏兒、梨兒！花下成千成百的蜜蜂嗡嗡地鬧著……</p>
<p id="newmain">“吹面不寒楊柳風”，不錯的，像母親的手撫摸著你。風里帶來些新翻的泥土的氣息，混著青草味，還有各種花的香，都在微微潤濕的空氣里醞釀。鳥兒將窠巢安在繁花嫩葉當中，高興起來了……</p>
</body>
</html>在上述代碼中，使用到了[att$=value]選擇器“p[id$="main"]”。只要p元素中的id屬性值是以“main”字符串結尾就會被選中，從而呈現特殊的文本效果。
E[att*=value]屬性選擇器
E[att*=value]選擇器用于選擇名稱為E的標記，且該標記定義了att屬性，att屬性值包含value子字符串。該選擇器與前兩個選擇器一樣，E元素也可以省略，如果省略則表示可以匹配滿足條件的任意元素。例如，div[id*=section]表示匹配包含id屬性，且id屬性值包含“section”字符串的div元素。
下面通過一個案例對E[att*=value]屬性選擇器的用法進行演示，如下所示。
<!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">我們消受得秦淮河上的燈影，當四月猶皎的仲夏之夜。 </p>
<p id="main1">在茶店里吃了一盤豆腐干絲，兩個燒餅之后，以至歪的腳步踅上夫子廟前停泊著的畫訪，就懶洋洋地躺到藤椅上去了。好郁蒸的江南，傍也還是熱的。"快開船罷！"槳聲響了。</p>
<p id="newdemo">小的燈舫初次在河中蕩漾;于我，情景是頗朦朧，滋味是怪羞澀的。我要錯認它作七里的山塘;可是，河房里明窗洞啟，映著玲瓏入畫的欄干，頓然省得身在何處了……</p>
<p id="olddemo">又早是夕陽西下，河上妝成一抹胭脂的薄媚。是被青溪的姊妹們所薰染的嗎？還是勻得她們臉上的殘脂呢？寂寂的河水，隨雙槳打它，終沒言語。密匝匝的繡恨逐老去的年華，已都如蜜餳似的融在流波的心窩里、連嗚咽也將嫌它多事，更哪里論到哀嘶……</p>
</body>
</html>在上述代碼中，使用了[att*=value]選擇器“p[id*="demo"]”。只要p元素中的id屬性值包含“demo”字符串就會被選中，從而呈現特殊的文本效果。
以上是“css3屬性選擇器有多少種”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
