css3——属性选择器（一）

lE[attr]只使用属性名，但没有确定任何属性值
lE[type="text"]指定属性名，并指定了该属性的属性值
lE[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
lE[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
lE[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
lE[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
lE[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
l备注：IE7及以上支持;
实例： 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;}
p[num]{border:1px solid #ccc;}
p[num=fifth]{color:#999;}
p[num~=one]{color:#cc1c1c;}
p[num^=s]{background:pink;}
p[num$=d]{color:red;}
p[num*=c]{padding-left:20px;}
p[num|=fifth]{background:green;}
</style>
</head>
<body>
    <p num="first one">111111</p>
    <p num="second">22222</p>
    <p num="third">333333</p>
    <p num="forth">444444</p>
    <p num="fifth">555555</p>
    <p num="fifth-five">555555</p>
</body>
</html>

 

posted @ 2016-03-02 20:41  elviraslp  阅读(232)  评论(0)  编辑  收藏  举报