第一题：
650) this.width=650;" src="https://s1.51cto.com/oss/201710/19/3adbe920694d1f9265e8eb42fbbc7a90.png" title="1.PNG" alt="3adbe920694d1f9265e8eb42fbbc7a90.png" />
根据以上代码，我们来判断一下P语句中的“文字”到底是什么颜色？
#box1 .spec2 p 这是第一个，根据权重判断，我们可以看出有一个id选择器，一个类选择器，一个标签选择器，其权重应该是1,1,1
div div #box3 p 这是第二个，我们可以看出有一个id选择器，没有类选择器，3个标签选择器，其权重应该为1,0,3
div.spec1 div.spec2 div.spec3 p 这是第三个，我们可以看出没有id选择器，有3个类选择器，4个标签选择器，权重应该是0,3,4
这三个进行对比，根据权重大小来选择，选择权重大的，应是第一个，所以“文字”的颜色应该为红色。
650) this.width=650;" src="https://s4.51cto.com/oss/201710/19/24a3501f06463cb2461fea40db76dc68.png" title="1.PNG" alt="24a3501f06463cb2461fea40db76dc68.png" />
第二题：
650) this.width=650;" src="https://s3.51cto.com/oss/201710/19/69d930900c6e3f3ecb0d6a72d1bb26d4.png" title="1.PNG" alt="69d930900c6e3f3ecb0d6a72d1bb26d4.png" />
根据以上代码，我们来判断一下span语句中的“文字”到底是什么颜色？
看两个选择器，看到两个都未到达span层，所以不根据其权重计算。根据继承来看，第一个精确到了p，而第二个仅仅是精确到了box，根据就近原则，应是p比较近，所以span语句中的“文字”是红色的。
第三题：
650) this.width=650;" src="https://s5.51cto.com/oss/201710/19/57a11a54c7503a80f97322967cea06e1.png" title="1.PNG" alt="57a11a54c7503a80f97322967cea06e1.png" />
根据以上代码，我们来判断一下span语句中的“文字”到底是什么颜色？
根据其有没有到达 span层次来判断，可以得知是绿色。
650) this.width=650;" src="https://s5.51cto.com/oss/201710/19/352672b428b5b02eca2a4991a5e0e462.png" title="1.PNG" alt="352672b428b5b02eca2a4991a5e0e462.png" />
第四题：
650) this.width=650;" src="https://s3.51cto.com/oss/201710/19/e6767ddf2201b785b2b085db743dd7c8.png" title="1.PNG" alt="e6767ddf2201b785b2b085db743dd7c8.png" />根据以上代码，我们来判断一下P语句中的“文字”到底是什么颜色？
根据逗号是分级选择器，所以两部分应该拆开看，再分别计算其权重：
#box1 div.spec2 p ，其权重是1,1,2
#box1 #box2 p，其权重是2,0,1
#box1 #box3 p，其权重是2，0,1
权重一样根据就近原则，则应该是#box1 #box3 p中的绿色。
650) this.width=650;" src="https://s3.51cto.com/oss/201710/19/337f3460cc9ed8f1dc03393a5cb0bb73.png" title="1.PNG" alt="337f3460cc9ed8f1dc03393a5cb0bb73.png" />
第五题：
650) this.width=650;" src="https://s5.51cto.com/oss/201710/19/09af25a5e436132ced26d9dd4ce05393.png" title="1.PNG" alt="09af25a5e436132ced26d9dd4ce05393.png" />根据以上代码，我们来判断一下P语句中的“文字”到底是什么颜色？
根据不能进位，所以判断是蓝色的。
650) this.width=650;" src="https://s2.51cto.com/oss/201710/19/d80f08a85dba2406eb0d1594ca5203c3.png" title="1.PNG" width="360" height="150" border="0" hspace="0" vspace="0" style="width:360px;height:150px;" alt="d80f08a85dba2406eb0d1594ca5203c3.png" />
第六题：
650) this.width=650;" src="https://s3.51cto.com/oss/201710/19/ac4d97549d2bf5d3cbe166ff10e73b0b.png" title="1.PNG" alt="ac4d97549d2bf5d3cbe166ff10e73b0b.png" />我们来分析一下代码里文字内容的颜色：
根据权重比较，2,0,0、1，1，1、0,2,2可知，应该是第一个，应该为蓝色。
650) this.width=650;" src="https://s5.51cto.com/oss/201710/19/a8055e46a902cfa0ce80d936f1c27756.png" title="1.PNG" alt="a8055e46a902cfa0ce80d936f1c27756.png" />
第七题：
650) this.width=650;" src="https://s1.51cto.com/oss/201710/19/20f27e7870bedccce6fb860b6c8e725c.png" title="1.PNG" width="800" height="576" border="0" hspace="0" vspace="0" style="width:800px;height:576px;" alt="20f27e7870bedccce6fb860b6c8e725c.png" />
我们来分析一下代码里文字内容的颜色：
第一个是继承，权重是0；
第二个权重是0，0,1
所以应该是蓝色的。
650) this.width=650;" src="https://s5.51cto.com/oss/201710/19/a9ee122e4840a7f3924d20cfe4ba3452.png" title="1.PNG" alt="a9ee122e4840a7f3924d20cfe4ba3452.png" />
第八题：
650) this.width=650;" src="https://s4.51cto.com/oss/201710/19/1ccb1c1652e62b36905ed69717f18443.png" title="1.PNG" width="900" height="763" border="0" hspace="0" vspace="0" style="width:900px;height:763px;" alt="1ccb1c1652e62b36905ed69717f18443.png" />
我们来分析一下代码里文字内容的颜色：
和第七题相似，应该是蓝色的。
第九题：
650) this.width=650;" src="https://s1.51cto.com/oss/201710/19/f431dc247de29c12b3678ac0fed44965.png" title="1.PNG" width="800" height="672" border="0" hspace="0" vspace="0" style="width:800px;height:672px;" alt="f431dc247de29c12b3678ac0fed44965.png" />我们来分析一下代码里文字内容的颜色：
第一个权重为0,0,2
第二个权重为0,0,1
所以颜色应该是蓝色。
第十题：
650) this.width=650;" src="https://s2.51cto.com/oss/201710/19/a9ddb03ba1c0419ccca8f387a9b11b08.png" title="1.PNG" width="600" height="517" border="0" hspace="0" vspace="0" style="width:600px;height:517px;" alt="a9ddb03ba1c0419ccca8f387a9b11b08.png" />
我们来分析一下代码里文字内容的颜色：
与上面有类似的，我们可以知道是蓝色的。
650) this.width=650;" src="https://s3.51cto.com/oss/201710/19/9a24c9c486cf93314337c91b5dd94814.png" title="1.PNG" width="300" height="126" border="0" hspace="0" vspace="0" style="width:300px;height:126px;" alt="9a24c9c486cf93314337c91b5dd94814.png" />
第十一题：
650) this.width=650;" src="https://s4.51cto.com/oss/201710/19/4949de92f6c4c2437c159f87e6901b1c.png" title="1.PNG" width="900" height="625" border="0" hspace="0" vspace="0" style="width:900px;height:625px;" alt="4949de92f6c4c2437c159f87e6901b1c.png" />我们来分析一下代码里文字内容的颜色：
第一个的权重为1,0,1
第二个的权重为1,0,0
所以应该是第一个红色的。
650) this.width=650;" src="https://s4.51cto.com/oss/201710/19/591efd652ca4d66b08db85d42a71810e.png" title="1.PNG" alt="591efd652ca4d66b08db85d42a71810e.png" />
CSS中选择器权重计算的例题
原文地址：http://xuhoji.blog.51cto.com/13357671/1974399