CSS优先级规则及增加优先级的小技巧

1.CSS优先级规则

CSS优先级规则决定了当多个CSS规则应用于同一个元素时，哪个规则会被应用。在计算优先级时，将为每个选择器分配一个值，并将这些值组合在一起以确定哪个规则具有更高的优先级。下面是CSS优先级规则的等级：

级别	选择器	计算值
0级	通配选择器，选择符，逻辑组合伪类	0
1级	标签选择器	1
2级	类选择器，属性选择器，伪类	10
3级	ID选择器	100
4级	style内联样式	1000
5级	！important	特别

例如，如果有以下两个规则：

```css
p { color: red; }

#my-para { color: blue; }
```

如果一个段落元素具有id“my-para”，则它将应用蓝色文本颜色，因为ID选择器的优先级为100，而标签选择器的优先级为1。

2.  增加CSS优先级小技巧

有时候，我们想要通过一些小技巧来增加CSS规则的优先级，以确保它们被正确地应用。以下是一些常见的技巧：

 a.重复自身选择器

通过在选择器中重复自身，可以增加选择器的优先级。例如，.foo.foo {}将比单个.foo选择器具有更高的优先级。

b.借助必然存在的属性选择器

通过在选择器中使用必然存在的属性选择器，可以增加选择器的优先级。例如，.foo[class]: {}将比单个.foo选择器具有更高的优先级。

c.使用!important

虽然!important应该谨慎使用，但它可以通过强制应用规则来增加优先级。例如，.foo { color: red !important; }将比其他具有相同选择器的规则具有更高的优先级。

总结

了解CSS优先级规则并使用小技巧来增加优先级是编写高效CSS代码的关键。然而，我们应该谨慎使用!important，并始终记住，最好的方法是编写简单，易于维护的CSS代码。