Css3属性选择器

最新推荐文章于 2021-11-30 21:12:51 发布

野猫WildCat

最新推荐文章于 2021-11-30 21:12:51 发布

阅读量231

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/k123ook/article/details/105135159

版权

Css3属性选择器

E[attr=“value”]	指定了属性名和该属性的属性值
E[attr~=“value”]	指定了属性名，并且属性值列表中含有"value"值
E[attr^=“value”]	指定了属性名，并且属性值以"value"开头
E[attr$=“value”]	指定了属性名，并且属性值以"value"结尾
E[attr*=“value”]	指定了属性名，并且属性值中包含了"value"
E[atte\|=“value”]	指定了属性名，并且属性值以"value-"开头

下面通过具体的例子来了解一下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
 <style>
 p{height:30px;border:1px solid black;}
 p[pig="pq"]{background:red;}        /**所指定的属性名中，属性值为"pq"**/
 p[pig~="g"]{background: pink;}     /**所指的属性名中，属性值列表中含有"pm"**/
 p[pig^="q"]{background: green;}     /**所指定的属性名中，属性值以"p"开头**/
 p[rabbit$="e"]{background: #693334;}/**所指定的属性名中，属性值以"e"结尾**/
 p[dog*="b"]{background: #18A376}    /**所指定的属性名中，某个属性值含有"b"**/
 p[pig|="b"]{background: #EDE4E5}    /**所指定的属性名中，属性值以"b-"开头**/
 </style>
</head>
<body> 
 <p pig="qz b">乔治</p>   
 <p pig="pq">佩奇</p>
 <p pig="pf b">猪爸爸</p>
 <p pig="pm g">猪妈妈</p>
 <p pig="b-pg">猪爷爷</p>
 <p sheep="sx">苏西</p>
 <p rabbit="rbe">瑞贝尔</p>
 <p dog="dn b">丹尼</p>
 <p dog="dm g">丹美</p>
</body>
</html>

结果如图所示：
结果是不是一目了然呢

一定要动手实现代码块，才能更好的理解

野猫WildCat

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3属性选择器

Css3属性选择器E[attr=“value”]指定了属性名和该属性的属性值E[attr~=“value”]指定了属性名，并且属性值列表中含有"value"值E[attr^=“value”]指定了属性名，并且属性值以"value"开头E[attr$=“value”]指定了属性名，并且属性值以"value"结尾E[attr*=“value”]指定了属性...
复制链接

扫一扫