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

css3 选择器(一)——属性选择器

时间:2016-11-10 14:42:27      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:地方   order   and   zh-cn   美国   get   data-   round   例子   

css属性选择器: demo

Element[attr]

Element[attr = "value"]

Element[attr ^= "value"]:以value开头

Element[attr $= "value"]:以value结尾

Element[attr *= "value"]:只要包含value

Element[attr ~= "value"]:必须有value这个词,

Element[attr |= "value"]: 属性值以value-开头,比如:zh-cn

 1 <p data-text="one web-js">不走寻常路?美国迈入“特朗普时代”的5大猜想</p>
 2 <p data-text="web-js one">不走寻常路?美国迈入“特朗普时代”的5大猜想</p>
 3 
 4 <p data-text="two web-css">河北一假信用点卷走500户村民2000余万存款</p>
 5 <p data-text="web-css two">河北一假信用点卷走500户村民2000余万存款</p>
 6 
 7 <p data-text="three web-html">马来西亚警方捣毁一组织中国籍残疾人行乞团伙</p>
 8 <p data-text="web-html three">马来西亚警方捣毁一组织中国籍残疾人行乞团伙</p>
 9 
10 
11 <p data-text="four xxx">揭秘四川巡山骑警:听狼嚎追马贼 每次任务都是玩命</p>
12 <p data-text="five ccc xxx">成都地面沉降最快地方1.4厘米/年 专家剖析主因</p>
13 <p data-text="six ccc ttt">成都地面沉降最快地方1.4厘米/年 专家剖析主因</p>

 

1 p{ line-height: 24px; font-size: 12px;}
2 p[data-text]{border-bottom: 1px solid #000;}
3 p[data-text = "one"]{background: pink;}
4 p[data-text ^= "t"]{background: green}
5 p[data-text $= "x"]{background: grey}
6 p[data-text *= "r"]{color: red}
7 p[data-text ~= "ccc"]{color: blue}
8 p[data-text |= "web"]{font-weight: bold; font-size: 20px;}

 

 例子:demo

 

css3 选择器(一)——属性选择器

标签:地方   order   and   zh-cn   美国   get   data-   round   例子   

原文地址:http://www.cnblogs.com/wmh1106/p/6050394.html

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