权重和层叠规则决定了CSS样式优先级

在网页开发中，CSS优先级是一个重要的概念，它决定了当多个样式应用于同一元素时，哪个样式会被采用。让我们透过一个生动的示例来深入理解CSS的优先级规则。

让我们看一段HTML代码，在这段代码中嵌入了一些CSS样式：

```html

```

接下来，我们深入了解CSS的优先级规则。

一、基本的优先级规则：

比较同一级别的选择器数量，数量多的优先级高。各级别的优先级如下：inline style（内联样式） > ID选择器 > 类选择器 > 标签选择器 | 伪类 | 属性选择器 > 伪对象 > 通配符 > 继承。

二、CSS权重规则：

在《页面重构中的模块化设计》中提到，CSS样式的权重受两个因素影响：样式的定义顺序和选择器的类型和数量。在同一CSS文件中，后定义的样式会覆盖先定义的。选择器的权重是通过计算规则来确定的。例如，内嵌样式的权重为1.0.0.0，ID样式的权重为0.1.0.0，类、伪类和属性选择器的个数决定第三位的值，伪元素和标签元素的个数决定第四位的值。

三、几个示例说明：

1. `.a .b .c {color:red;}` // 权值为 0.0.3.0，说明只有三个类选择器。

2. `{…}` // 权值为 0.0.0.0，通配符对权重没有影响。

3. `.a .b a {color:green}` // 权值为 0.0.2.1，说明有两个类选择器和一个标签选择器。

4. `hid {color:black;}` // 权值为 0.1.0.0，说明只有一个ID选择器。

在这个例子中，我们可以通过计算权重来确定最终的颜色样式。根据权重规则，我们可以看到 `redP p span em` 的权重最高，因此最终的颜色应该是黄色。这就是CSS优先级的实际应用。理解这些规则对于开发者来说非常重要，因为在开发过程中可能会遇到样式冲突的情况，这时就需要依靠这些规则来解决冲突。