您好,登錄后才能下訂單哦!
這篇文章主要介紹css屬性選擇器的使用方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
css 屬性選擇器是什么?有什么用?
在HTML中的元素都可以具有屬性,這些屬性是顯示或修改其行為的附加值。html中包含許多屬性,但不是所有HTML元素都適用所有的屬性。與元素無關(guān)的屬性不會對它有任何影響。
不管該屬性是否能正確的應用,你仍然可以通過CSS選擇它。但是,在網(wǎng)站上任何地方使用無效的HTML屬性都是非常糟糕的做法,因為不同的瀏覽器對無效HTML的解析是不同的。你不能責怪瀏覽器讓你的網(wǎng)站看起來很奇怪,他們只是想通過填補空白來解釋你的錯誤代碼。
而,css的屬性選擇器允許我們選擇具有特定屬性或特定值屬性的元素,即:可以根據(jù)指定的屬性名稱找到對應的標簽,然后設(shè)置屬性?!鞠嚓P(guān)視頻教程推薦:css3教程】
css 屬性選擇器的使用
在html中屬性值必須是標識符或字符串。該規(guī)范相當模糊,因為它指出選擇器中屬性名稱和值的區(qū)分大小寫取決于文檔語言。由于瀏覽器行為不一致這一事實,最安全的做法是確保所使用的案例在CSS和HTML之間保持一致。
屬性選擇器可以有7種方式匹配(從CSS3規(guī)范開始):
1、[<attribute>]
定位所有包含<attribute>屬性的元素,無論其值是多少。
例:
<div data-colour="green"></div> <div data-colour="blue"></div> <div data-colour="yellow"></div>
css代碼選擇:
[data-colour] { /* 一些性質(zhì),例:color..... */ }
2、[<attribute>=<value>]
定位所有<attribute>屬性值為<value>的元素。
<div data-colour="green"></div>
[data-colour="green"] { /* 一些性質(zhì) */ }
3、[<attribute>~=<value>]
使用<attribute>屬性定位元素,其值為空格分隔的單詞列表,其中一個必須為<value>。
<value>本身不能包含空格,也不能是空字符串。
<div data-colour="green yellow blue"></div>
[data-colour~="green"] { /* 一些性質(zhì) */ }
4、[<attribute>|=<value>]
使用<attribute>屬性定位元素,其值正好<value>或以<value>開頭,后跟“ - ”。
注:主要用于語言子碼匹配中,如“en”,“en-US”和“en-UK”。
<div data-colour="green-table"></div> <div data-colour="green-chair"></div> <div data-colour="green-bottle"></div>
[data-colour|="green"] { /* 一些性質(zhì) */ }
5、[<attribute>^=<value>]
子串匹配選擇器。使用<attribute>屬性定位元素,其值以<value>開頭。
注:<value>不能是空字符串。
<div data-colour="greenish-yellow"></div> <div data-colour="greengoblin"></div>
[data-colour^="green"] { /* 一些性質(zhì) */ }
6、[<attribute>$=<value>]
子串匹配選擇器。使用<attribute>屬性定位元素,其值以<value>結(jié)尾。
注:<value>不能是空字符串。
<div data-colour="yellowish-green"></div> <div data-colour="seagreen"></div>
[data-colour$="green"] { /* 一些性質(zhì) */ }
7、[<attribute>*=<value>]
子串匹配選擇器。使用<attribute>屬性定位元素,其值包含<value>的實例。
注:<value>不能是空字符串。
<div data-colour="goblingreenish"></div>
[data-colour*="green"]{ /* 一些性質(zhì) */ }
組合屬性選擇器
屬性選擇器具有與類和偽類相同的特定級別;你可以將屬性選擇器與其他選擇器(如元素,類或ID)組合在一起。例:
div[data-colour="green"] { /* 特異性為11 */ } .swatch[data-colour="green"] { /* 特異性為20 */ } #tile25[data-colour="green"] { /*特異性為110 */ }
你還可以組合多個屬性選擇器以匹配特定模式。例如,如果您只想使用包含單詞“green”的替換文字定位2x圖像,則你的選擇器將如下所示:
img[srcset~="2x"][alt*="green"] { /* 一些性質(zhì) */ }
此外,由于屬性值是作為字符串讀取的,因此你不必擔心轉(zhuǎn)義特殊字符以使它們匹配,這是與類或ID不同。這意味著我們可以自由地擁有以下內(nèi)容:
[data-emotion="以上就是css的屬性選擇器是什么?屬性選擇器的使用的詳細內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!
以上是css屬性選擇器的使用方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。