1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 .first span{ 8 color:red; 9 } 10 .food{ 11 color:blue; 12 } 13 span{ 14 color:pink; 15 } 16 </style> 17 </head> 18 <body> 19 <p class="first">三年级时，<span class="food">dddddd<span class="food">我还是一个</span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。</p> 20 <span>121212</span> 21 <span class="food">00009999</span> 22 </body> 23 </html>
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。继承也有权值但很低，有的文献提出它只有0.1。
1 p{color:red;} 2 .first{color:green;} 3 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
正确是绿色。
.first{color:green;}/*因为权值高显示为绿色*/span{color:pink;}/*设置为粉色*/<p class="first">我是绿色<span>我是粉红</span>还是绿色</span>
问:first{color:green;}权值最大，span{color:pink;}权值为1，那为什么显示的是粉红色呢？
答：.first{color:green;}是为第一段设置为绿色，当没有span{color:pink;}这条语句时，span会也会显示为green，是因为span继承了.first中的绿色，但当设置了span{color:pink;}这条语句后，span就是会复盖上面继承下来的绿色，因为继承的权值可以理解是最低的。
