问输出的文本的颜色是什么？
//CSS代码
.blue{
color:blue
}
.yellow{
color:yellow
}
//HTML代码
<span class="yellow blue" style="text-color:'red'">输出的文本的颜色是什么</span>
咋一看，按照选择器的优先级原则，行内样式的优先级最高，因此，答案应该是red。
其实不然，span的文本属性并没有text-color，而是color； 因此我专门去调试，将text-color改成color
<span class="yellow blue" style="color:'red'">输出的文本的颜色是什么 调试结果依然不是red。
这个地方就比较细节了，color可以直接使用red，不需要加上引号，因此，这个地方行内式的样式并不起作用。
那么，这道题，到底选什么，我把题目放到微信群之后，有不少人觉得应该选择blue，这个时候就暴露了自己对选择器优先级知识混淆。
我们来复习一下选择器的优先级原理：
- ！important>行内式>id>类，属性>标签，伪元素（通配符权重为0）
- 如果是同种优先级的情况下，都是内嵌式，我们就按照1,1,1,1,1的方式进行赋权比较，从上一级的数字比，直到有一个属性值得权重更高；
- 如果说2得方法赋值得权重相同，那么这个时候，则使用更后出现的属性值进行赋值
这个同学出现的错误就是没有严格按照定义来，把class=""里面的顺序当作了优先级的顺序
因此，最终的答案应该是yellow。
下面我们再看一个题目，这个是多个标签嵌套的。
//问输出的文本的颜色是什么
＜ul class=”shopping-list” id=”awesome”＞
＜li＞＜span＞Milk＜/span＞＜/li＞
＜li class=”favorite” id=”must-buy”＞＜span class=”highlight”＞Sausage＜/span＞＜/li＞
＜/ul＞
//CSS代码
.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}
我们一起来看看文本的颜色的选择器有哪些,将所有与该元素相关联的选择器全部摆出来
.shopping-list , #awesome , .favorite , #must-buy
color:red的有.shopping-list 和.favorite，优先级为0,0,2,0,0
color:blue的有#must-buy,优先级为0,1,0,0,0
因此选择blue 最后，我在网上找了一些专门的练习题，供大家练习。
[(www.everyinch.net/index.php/l…)] 链接转载于：陈童的博客
