您好,登錄后才能下訂單哦!
小編給大家分享一下css屬性選擇器有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
第一種: E[att^=value]屬性選擇器
此選擇器只選擇標簽名稱是E
的,同時他具有att的屬性,att屬性值包含前綴為value
的子字符串。
注:E是可以省略的,如果省略則表示匹配滿足條件的任意元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> p[id^="one"]{ color: pink; font-family: "微軟雅黑"; font-size: 20px; } </style> </head> <body> <p id="one">為了看日出,我常常早起。那時天還沒有大亮,周圍非常清靜,船上只有機器的響聲。</p> <p id="two">天空還是一片淺藍,顏色很淺。轉眼間天邊出現了一道紅霞,慢慢地在擴大它的范圍,加強它的亮光。我知道太陽要從天邊升起來了,便轉眼地望著那里。</p> </body> </html>
結果為:
我們可以看到id
名是one
的文字變成了粉紅色,而id
名是two
的文字并沒有發生改變。
第二種: E[att$=value]屬性選擇器
此選擇器只選擇標簽名稱是E
的,同時他具有att的屬性,att屬性值包含后綴為value
的子字符。與E[att^=value]
選擇器一樣,E元素可以省略,如果省略則表示匹配滿足條件的任意元素。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> p[id$="1"]{ color:ocf; font-family: "宋體"; font-size: 30px; } </style> </head> <body> <p id="one">盼望著,盼望著,東風來了,春天的腳步近了。</p> <p id="two">小草偷偷地從土里鉆出來,嫩嫩的,綠綠的。園子里,田野里,瞧去,一大片一大片滿是的。坐著,躺著,打兩個滾,踢幾腳球,賽幾趟,捉幾回迷藏。風輕悄悄的,草綿軟軟的。</p> <p id="one1">桃樹、杏樹、梨樹,你不讓我,我不讓你,都開滿了花趕趟兒。紅的像火,粉的像霞,白的像雪。花里帶著甜味,閉了眼,樹上仿佛已經是桃兒、杏兒、梨兒!花下成千成百的蜜蜂嗡嗡地鬧著……</p> <p id="1two">“吹面不寒楊柳風”,不錯的,像母親的手撫摸著你。風里帶來些新翻的泥土的氣息,混著青草味,還有各種花的香,都在微微潤濕的空氣醞釀。鳥兒將窠巢安在繁花嫩葉當中,高興起來了……</p> </body> </html>
我們可以很明顯的看到id
名是one1
的字體變大了,與one1
相似的1two
字體并沒有變大,這是因為本選擇器只有在字符串后面加上1
的才會改變,其他的沒有用。
第三種: E[att*=value]屬性選擇器
此選擇器只選擇標簽名稱是E的,同時他具有att的屬性,att屬性值包含value子字符串。該選擇器與前兩種選擇器一樣,E元素也可以省略,如果省略則表示可以匹配滿足條件的任意元素。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style> p[id*="1"]{ color:greenyellow; font-family: "宋體"; font-size: 20px; } </style> </head> <body> <p id="one">我們消受得秦淮河上的燈影,當四月猶皎的仲夏之夜。</p> <p id="one1"> 小的燈舫初次在河中蕩漾;于我,情景是頗朦朧,滋味是怪羞澀的。我要錯認它作七里的山塘;可是,河房里明窗洞啟,映著玲瓏入畫的欄干,頓然省得身在何處了……</p> </body> </html>
以上是“css屬性選擇器有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。