div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
对于什么情况下使用什么选择器，用不同选择器的原则是：第一：准确的选到要控制的标签；第二：使用最合理优先级的选择器；第三：HTML和CSS代码尽量简洁美观。通常：
1、最常用的选择器是类选择器。
2、li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
3、极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。
在这里不得不提使用在标签内引入CSS的方式来写CSS，即：
<div style="color:red">polaris</div>
这时候的优先级是最高的。我们给它的优先级是1000，这种写法不推荐使用，特别是对新手来说。这也完全违背了内容和显示分离的思想。DIV+CSS的优点也不能再有任何体现。
后代选择器的定位原则
在这里介绍一下对于后代选择器，浏览器是如何查找元素的呢？
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
<style>
DIV#divBox p span.red{color:red;}
><style>
<body>
<div id=”divBox”>
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class=’red’>s4</span></p>
</div>
</body>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到<span class=’red’>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的CSS
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：
◆不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。
