css学习笔记——属性选择器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css学习笔记——属性选择器相关的知识，希望对你有一定的参考价值。
本笔记参考资料来自——妙味课堂
[attribute]只使用属性名，但没有确定任何属性值
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov],span[miaov],#div1[miaov],.div[miaov]{background:red;} </style> </head> <body> <p miaov="leo">111</p><!--筛选--> <div> <span miaov="dp">222</span><!--筛选--> </div> <div id="div1" miaov="zm">333</div><!--筛选--> <div class="div" miaov="xm">444</div><!--筛选--> </body> </html>
[attribute=value]指定属性名，并指定了该属性的属性值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov=leo]{background:red;} </style> </head> <body> <p miaov="leo">111</p><!--筛选--> <p miaov="dp">222</p> <p miaov="zM">333</p> <p miaov="xm">444</p> </body> </html>
[attribute~=value]指定属性名，并且具有属性值，此属性值是一个词列表，以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov~=old]{background:red;} </style> </head> <body> <p miaov="leo old">111</p><!--筛选--> <p miaov="old">222</p><!--筛选--> <p miaov="zm">333</p> <p miaov="xm old young">444</p><!--筛选--> </body> </html>
[attribute$=value]指定了属性名，并且有属性值，而且属性值是以value结束的
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov$=m]{background:#CC0;} </style> </head> <body> <p miaov="bleo old">111</p> <p miaov="bdp">222</p> <p miaov="bzm">333</p><!--筛选--> <p miaov="gxm">444</p><!--筛选--> </body> </html>
[attribute^=value]指定了属性名，并且有属性值，属性值是以value开头的
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov^=g]{background:pink;} </style> </head> <body> <p miaov="bleo old">111</p> <p miaov="bdp">111</p> <p miaov="bzm">111</p> <p miaov="gxm">111</p><!--筛选--> </body> </html>
[attribute*=value]指定了属性名，并且有属性值，而且属值中包含了value
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov*=d]{background:#C3C;} </style> </head> <body> <p miaov="bleo old">111</p><!--筛选--> <p miaov="bdp">222</p><!--筛选--> <p miaov="bzm">333</p> <p miaov="gxm">444</p> </body> </html>
[attribute|=value]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1px solid #000;} p[miaov|=b]{background:#C3C;} </style> </head> <body> <p miaov="b-leo">111</p><!--筛选--> <p miaov="bleo">222</p> <p miaov="b-leo">333</p><!--筛选--> <p miaov="g-xm">444</p> <p miaov="b">555</p><!--筛选--> </body> </html>
实例——实现如下效果
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;} p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;} p a[href*=text]{ background-image:url(img/text.gif);} p a[href*=pdf]{ background-image:url(img/swf.gif);} p a[href*=exl]{ background-image:url(img/x.gif);} </style> </head> <body> <p> <a href="http://www.miaov.com/doc/javascript.html">妙味课堂</a> </p> <p> <a href="http://www.miaov.com/text/javascript.html">妙味课堂</a> </p> <p> <a href="http://www.miaov.com/pdf/javascript.html">妙味课堂</a> </p> <p> <a href="http://www.miaov.com/exl/javascript.html">妙味课堂</a> </p> </body> </html>
以上是关于css学习笔记——属性选择器的主要内容，如果未能解决你的问题，请参考以下文章
CSS常用选择器伪元素选择器伪类选择器大全——响应式Web系列学习笔记