css3选择器

css3选择器

1.属性选择器：[attr*=val],[attr^=val],[attr$=val];attr表示样式标签，val表示类名

 1 <style type="text/css" >
 2 <!--所有id中包含section1的应用该样式-->
 3 [id*=section1]{
 4     background:#6F9;
 5     color:#3CC;
 6     }
 7 <!--所有id开头中包含sub的应用该样式-->
 8 [id^=sub]{
 9     background:skyblue;
10     color:#fff;
11     }
12 <!--所有id结尾包含-2应用该样式-->

13 [id$=\-2]{
14     background:#6F9;
15     color:#3CC;
16     }
17 
18 </style>
19 <body>
20 
21 <div id="subsection1">这是一个属性选择器</div>
22 <div id="section1-1">这是一个属性选择器</div>
23 <div id="section1-2">这是一个属性选择器</div><br />
24 
25 <div id="subsection2">这是一个属性选择器</div>
26 <div id="section2-1">这是一个属性选择器</div>
27 <div id="section2-2">这是一个属性选择器</div><br />
28 
29 <div id="subsection3">这是一个属性选择器</div>
30 <div id="section3-1">这是一个属性选择器</div>
31 <div id="section3-2">这是一个属性选择器</div>
32 
33 </body>

2.结构性伪类选择器：first-line,first-letter,before,after

li.style:before{
    content:url(style.jpg);
    }
li.style:after{
    content:"这是插入的文字";
    }
li.style:first-line{
    background:#6F6;
    }
li{list-style:none;}    


<li class="style">使用选择器<br />插入文字、图片　</li>

 

 

posted @ 2013-08-27 18:05  Alexin  阅读(130)  评论(0)  编辑  收藏  举报