详细描述css优先级规则与代码示例

CSS优先级规则指的是CSS样式表中不同选择器的权重比较规则，用于确定在多个样式规则应用于同一个HTML元素时，最终应该采用哪个样式。CSS权重和代码顺序是样式优先级方面的两个重要考虑因素。

CSS选择器的优先级是由四个级别的值组成，每个级别的值都有一个权重，级别的值越高，则权重越大。四个级别的值分别是：

1. 行内样式(内联样式) - 应用于特定的元素，如style属性。
2. ID选择器 - #id。
3. 类选择器、属性选择器和伪类选择器 - .class、[attr]、:hover等。
4. 标签选择器、伪元素选择器 - div、p、:before等。

通常情况下，如果具有相同的权重，则后面的规则将替换前面的规则。以下是几个示例：

/*权重 0，标签选择器*/
p {
  color: blue;
}

/*权重 1，类选择器*/
.text {
  color: red;
}

/*权重 2，ID 选择器*/
#example {
  color: green;
}

/*权重 3，内联样式*/
<p style="color: orange;">This is a paragraph.</p>

在上面的代码示例中，p选择器的权重值为0，.text选择器的权重值为1，#example选择器的权重值为2，而内联样式的权重值最高为3，因此内联样式将覆盖所有其他样式。

需要注意的是，当多个选择器具有相同的权重时，它们将按顺序应用于元素。例如：

.text {
  color: red;
}

p.text {
  color: blue;
}

在这个例子中，如果一个p元素同时匹配.text和p.text选择器，则p.text选择器将具有更高的优先级，并且其样式将应用于元素。