码迷,mamicode.com
首页 > Web开发 > 详细

css3——属性选择器

时间:2016-03-02 21:59:10      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

css3——属性选择器

标签:

原文地址:http://www.cnblogs.com/slp-qm/p/5236429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!