对CSS选择器权重的认识(亲测)

CSS选择器权重：从基础到怪异表现

在网页设计中，CSS选择器权重是一个至关重要的概念。理解并掌握它，可以帮助我们更好地控制页面元素的样式。让我们通过一个具体的例子来深入理解。

假设你有以下的CSS代码：

```css

div.ui_infor p {font-size: 16px;}

.ui_infor p {font-size: 14px;}

```

这两行代码的权重是如何判断的呢？我们要了解CSS选择器的权重是由四个数值组成的，这四个数值分别代表了不同类型的选择器。

第一个数值代表写在标签上的样式，如 `

`。第二个数值代表的是id选择器，如 `demo {}`。第三个数值则是类名（`.demo {}`）、伪类（`:hover`）或属性选择器 `[rel=””]` 的权重。第四个数值代表标签选择器 `p {}` 的权重。

在这个例子中，第一行代码 `div.ui_infor p {font-size: 16px;}` 的权重是 0,0,1,2（标签选择器权重为2），而第二行代码 `.ui_infor p {font-size: 14px;}` 的权重是 0,0,1,1。由于权重更高的选择器会覆盖权重较低的选择器，因此在这个例子中，显示的字体大小将是 16px。

值得注意的是，`!important` 在CSS中具有最高的权重。在IE-6浏览器中存在一个特殊的“点BUG”，即当多个相同权重的样式规则被应用到同一个元素时，带有 `!important` 的规则会被后面的规则覆盖。例如：

```css

p {font-size: 18px !important;font-size: 12px;}

```

在IE-6中，显示的字体大小将是 12px。如果只有一个带有 `!important` 的规则和一个不带 `!important` 的规则，那么 `!important` 的规则将优先生效。例如：

```css

p {font-size: 18px !important;}

p {font-size: 12px;}

```

在IE-6中，显示的字体大小将是 18px。这说明IE-6是支持 `!important` 的，只是在处理同行同名样式时表现有些怪异。

利用这个特性，我们可以在IE-6中实现“min-height”。例如：

```css

p { min-height: 50px; height:auto !important; height:50px;}

```

这样写可以在IE-6中使得段落元素的最小高度为50像素，而不会引发其他浏览器的兼容性问题。理解CSS选择器的权重和 `!important` 的特殊表现对于编写兼容各种浏览器的CSS代码至关重要。