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>
