一、属性选择器
1.只选择属性名
<style>
p[miaov]{background:red;}
</style>
</head>
<body>
<p miaov="leo">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
2.选择对应属性值得元素（leo引号可加可不加，效果一样）
p[miaov=leo]{background:red;}
3.指定属性名，并且有属性值，属性值是一个以空格隔开的词列表，其中一个词列表中包含了一个value词，~必须写
p[miaov~=old]{background:red;}
<p miaov="leo old">leo</p>
4.指定属性名，并有属性值，并且是以g为开头
p[miaov^=g]{background:pink;}
<p miaov="gxm">小美</p>
5.指定属性名，并有属性值，并且是以M为结束
p[miaov$=M]{background:#CC0;}
</style>
</head>
<body>
<p miaov="bleo old">leo</p>
<p miaov="bdp">杜鹏</p>
<p miaov="bzM">子鼠</p>
<p miaov="gXM">小美</p>
</body>
6.指定属性名，并有属性值，并且其中包含d
p[miaov*=d]{background:#C3C;}
<p miaov="bdp">杜鹏</p>
例子
<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>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
