后代选择器

 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就是会复盖上面继承下来的绿色，因为继承的权值可以理解是最低的。

后代选择器

推荐阅读