<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/**{color:#CF0}黄色*/
/*#b1{color:#F00}红色*/
/*.c3{color:#F0F}粉色*/
/*span{color:#0F3}绿色*/
div,span{color:#93F}/*紫色*/
div.c3{color:#F00}/*红色*/
div span{color:#0F0}/*绿色*/
div.c2{color:#FF6}/*黄色*/
</style>
</head>
<body>
<div style="color:#0F3;">hello</div>
<div class="c3">
内联
优点控制精确
缺点是代码重置性很差；页面代码乱 优先级最高
</div>
<div class="c3">
内嵌
优点是代码重用性好
缺点是控制没有内联精确 优先级其次
</div>
<div class="c3">
外部嵌入
优点是代码重用性最好
缺点是控制最不精确 优先级和内嵌相同
</div>
<div id="b1">精准控制</div>
<span>标签选择器</span>
<span>标签选择器</span>
<span>标签选择器</span>
<span>标签选择器</span>
<span>标签选择器</span>
<div>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
</div>
<div class="c2">
内联
优点控制精确
缺点是代码重置性很差；页面代码乱 优先级最高
</div>
<div class="c2">
内嵌
优点是代码重用性好
缺点是控制没有内联精确 优先级其次
</div>
<div class="c2">
外部嵌入
优点是代码重用性最好
缺点是控制最不精确 优先级和内嵌相同
</div>
<!--*选择<标签选择<class选择器<id选择--> 选择器优先级
</body>
</html>