HTML中选择器的使用及优先级比较
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>
