CSS中选择器优先权和样式分层解决方案

第一.新手的问题
你经常看到一个选择器像李#第一网页上。很多新手的问题由于使用id，可以识别元素。为什么你必须添加一个李之前只写ID选择器作为# first.that听起来好。简单的测试没有问题。
但是，我们经常看到带有元素名称的选择器。例如，在微软的项目模板中，有许多具有元素名称的选择器。如果没有，我为什么要这样写哈哈哈，还有一个原因，这写。让我们和你一起看看。

CSS代码将内容复制到剪贴板。
UL # navlist
{
浮：错误；
}
UL # navlist李
{
显示：内联；
}

两。出现的问题
编写一个简单的菜单，用UL和李实现，并使用菜单项之间的边界实现分隔符。
HTML代码如下所示：

xml代码将内容复制到剪贴板。
回家
商场
购物卡
行政
下面的样式表，我们先画虚线的间隔的所有超链接添加左边框，然后删除第一个菜单项的左边框，和我的第一个样式使用。第一。

CSS代码将内容复制到剪贴板。
UL # navlist李
{
显示：内联；
}
UL # navlist李
{
左边界：1px点缀# 8a8575；
填料：10px；
边距：10px；
颜色：# 8a8575；
文字装饰：无；
浮点数：左；
}
第一个。
{
边界：无；
}

看看效果。完全没有反应。
另一个地方说ID选择器是一个更高的级别，然后将类改为ID。

xml代码将内容复制到剪贴板。
回家

样式表也相应修改。

CSS代码将内容复制到剪贴板。
第一个#
{
边界：无；
}

但是结果怎么样呢岿然不动 uff01
看看Firefox的Firebug和被忽视。
三。原因
为什么我的风格被杀了一秒钟
网上有很多文章，但都不一致。有人说，我们应该考虑三个层次，但也有人说我们需要考虑四个层次，但总的方向一般是关于级联的。
这是更好地看到一个在W3C网站。相关标准在本页可以看到，到目前为止有三个CSS标准：CSS1和CSS2，CSS3。
CSS1是最早的标准，其中的层叠顺序的描述在这里，和一个简单的例子。

CSS代码将内容复制到剪贴板。
{ {….. * = 0 b = 0 C = 1 - >特殊性= 1 *
UL…{ * = 0 B = 0 C = 2 - >特殊性= 2 *
UL = a = 0 b = 0 C＝3 {……} * * = * = 3
li.red {…} / * = 0，B = 1 C = 1 >特异性= 11 * /
ul ol li.red a 0 b = 1 C = 3 {…} / * * / ->特异性= 13
# x34y {…} / * = 1，B = 0 C = 0 >特异性= 100 * /

在CSS1，优先将分为三组，ID选择器作为A组，B组为类选择器元素名为C组，每个组一次算一次，进行比较，根据一组相同的情况下，B组使用，C组是最后的。什么选择高、样式选择器提供的偏好是有效的。例如，在上面的例子中，第五组使用ID的最高水平，所以风格设置设定生效和其他设置将被忽略。
css21标准
在CSS2，风格上的集团在连续增加，因此参与组成的4组，与风格的最高优先级。以同样的方式，例如在CSS2规范提供。
CSS代码将内容复制到剪贴板。
* = 0 = 0 C = 0 D = 0 > {} / * * /特异性= 0,0,0,0
李= 0 = 0 C = 0 D = 1 > {} / * * /特异性= 0,0,0,1
李：一线= 0 = 0 C = 0 D = 2 > {} / * * /特异性= 0,0,0,2
UL Li = 0 = 0 C = 0 D = 2 > {} / * * /特异性= 0,0,0,2
ul ol +李= 0 = 0 C = 0 D = 3 > {} / * * /特异性= 0,0,0,3
H1 * { rel= } { } = 0，B = 0 C = 1 D = 1 / * * /特异性-> = 0,0,1,1
ul ol li.red a 0 b = 0 C = 1 D = 3 > {} / * * /特异性= 0,0,1,3
li.red.level a 0 b = 0 C = 2 D = 1 > {} / * * /特异性= 0,0,2,1
# x34y a 0 b = 1 C = 0 D = 0 > {} / * * /特异性= 0,1,0,0
a 1 b = 0 C = 0 D = 0 / * * /特异性-> = 1,0,0,0

# x97z {颜色：红}

在本例中，样式具有最高优先级，因此它将覆盖通过ID完成的设置，颜色为绿色。

四。解决问题
通过以上的分析我们可以看到，是不足以提供选择器可以生效，而且在我们的问题选择的优先权，即使我选择第一个菜单项的使用：#第一个，包括一个ID和一个元素的名称，然后优先级别：
a＝0，b＝1，c＝0，d＝1。
然而，常见的选择是：UL # navlist李，包括优先级ID和3元的名字，所以优先考虑：
a＝0，b＝1，c＝0，d＝3。
所以我们的选择器不能和普通选择器相比，悲剧发生了！
知道原因，问题也很简单。提高选择器的优先级别不仅仅是通用选择器的优先级。例如，我们可以这样写。
UL # navlist李#第一
现在的优先顺序是什么
a＝0，b＝2，c＝0，d＝3。
当B组进行比较时，它已经超过了，看看它是否成功！这是成功的，如下所示！
Also can be added to the importance of the explanation, can also be solved.Important must be written between the style and the semicolon, and each style must be declared individually.This can also be used to adjust the compatibility problem, IE6 does not recognize! 很重要，换句话说，兼容性问题最好用哈克方法来解决！

CSS代码将内容复制到剪贴板。
第一个#
{
边界：无！重要；
}

五。总结
从上面的描述中，我不知道您对选择器的重量有一定的了解。为了了解选择器的重量，您可以更好地控制样式，并使用高权重的样式来覆盖那些重量较低的！