CSS1 是最早的标准，其中关于层叠顺序的描述在 这里，还提供了一个简单的示例进行说明。
复制代码
LI {…} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {…} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {…} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {…} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {…} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {…} /* a=1 b=0 c=0 -> specificity = 100 */
在 CSS1 中将优先级分为三组，将 id 选择器作为 a 组，类选择器作为 b 组，元素名作为 c 组，每组中出现一次，计数一次，按照先 a 组进行比较，相同的情况下，使用 b 组进行比较，最后是 c 组。什么选择器的优先级别高，什么选择器提供的样式有效。比如在上面的例子中，第 5 组使用 id 的级别最高，所以，这组的样式设置生效，而其他的设置将会被忽略掉。
在 CSS2 中，又增加了关于行内说明 style 的组，所以参与比较的组成为了 4 组，其中 style 的优先级别最高。同样，在 CSS2 的标准说明中也提供了样例。
复制代码
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=”” /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<style type=”text/css”>
#x97z { color: red }
</style>
<p id=”x97z” style=”color: green”>
</p>
在这个示例中，style 的优先级别最高，所以将会覆盖掉通过 id 进行的设置，颜色为绿色。
四. 解决问题
通过上面的分析可以看到，仅仅提供选择器并不足以能够生效，还要看选择器的优先级别，在我们的问题中，即使使用 id 来选择第一个菜单项：#first a ，包括了一个 id 和一个元素名，那么所得的优先级别为：a=0, b=1, c=0, d=1
可是，通用的选择器是这样的：ul#navlist li a，优先级中却包括了一个 id, 还有 3 个元素名称，所以优先级别为：
a=0, b=1, c=0, d=3
所以我们的选择器没有比过通用的选择器，悲剧发生了！
知道了原因，问题也就简单了，提高我们选择器的优先级别，超过通用选择器的优先级就可以了，比如，我们可以写成这样：
复制代码
ul#navlist li#first a
