本笔记参考资料来自——妙味课堂
[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>
时间： 2024-11-23 15:20:53