css3属性选择器怎么用

小编给大家分享一下css3属性选择器怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

 在css3还未出现之前。我们经常使用标签选择器、类选择器、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节点

/*属性匹配 */

p[worker]{

background-color:red;

}

节点属性为worker的节点都被选中了

/* 值匹配 */

p[worker="laoliu"]{

background-color:red;

}

属性值为laoliu的节点被选中

/*匹配开头*/

p[worker^="lao"]{

background-color:red;

}

/*末尾匹配*/

p[worker$="wu"]{

background-color:red;

}匹配属性值结尾是wu的节点

/*属性值模糊匹配*/

p[worker*="laol"]{

background-color:red;

}

以上是“css3属性选择器怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！