溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3屬性選擇器怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在css3還未出現(xiàn)之前。我們經(jīng)常使用標簽選擇器、類選擇器、id選擇器等，今天我們開始介紹css3中新增的屬性選擇器。
第一步，先建立一個html片段
<!--公司里有四個人 老劉 老王 老李 老吳-->
<p worker="laoliu">laoliu</p>
<p worker="lao-wang">laowang</p>
<p worker="laoli">laoli</p>
<p worker="laowu">laowu</p>
我們看到這里添加了一個自定義屬性worker,我們可以通過css3來指定自定義的屬性和屬性值來刪選dom節(jié)點
/*屬性匹配 */
p[worker]{
background-color:red;
}
節(jié)點屬性為worker的節(jié)點都被選中了
/* 值匹配 */
p[worker="laoliu"]{
background-color:red;
}
屬性值為laoliu的節(jié)點被選中
/*匹配開頭*/
p[worker^="lao"]{
background-color:red;
}
/*末尾匹配*/
p[worker$="wu"]{
background-color:red;
}匹配屬性值結尾是wu的節(jié)點
/*屬性值模糊匹配*/
p[worker*="laol"]{
background-color:red;
}
以上是“css3屬性選擇器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
