1.id選擇器,其中每個標簽的id選擇器的值是唯一的
<div id="text1">
css中用 #text1{ }
2.類選擇器(class),可以有多個
<div class="text1"></div>
<div class="text1 text2"></div>
css中用 .text{}
3.后代選擇器
比如要是選定<li></li>則
<ul>
<li></li>
</ul>
css中用: ul li{ }
4.子元素選擇器,還是上個列子(注意只能找下一級,不能找下下級)
css中用 ul>li{ }
5.交集選擇器
<ul>
<li class="text"></li>
<li></li>
</ul>
css中用: li.text{}
6.並集選擇器
<div></div>
<p></p>
css中用: div,p{ }
優先級:
行內樣式>id選擇器>類選擇器>標簽選擇器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .box1{color: aqua;} 8 #box2{ color: blueviolet;} 9 .box3 p .box4{color: blue;} 10 div>h3{color: darkslategray;} 11 </style> 12 </head> 13 <body> 14 <div class="box1">類選擇器測試</div> 15 <div id="box2">id選擇器測試</div> 16 <div class="box3"> 17 <p><span class="box4">后代選擇器</span></p> 18 <h3> 子元素選擇器</h3> 19 </div> 20 </body> 21 </html>