[分享]css中 优先级和权重

在CSS中，优先级和权重是一对非常重要的概念。当多个CSS规则应用于同一个元素时，就需要根据优先级和权重的顺序来决定应用哪个规则。通常情况下，CSS选择器的权重是由其具体性和出现次数来决定的。CSS的...

在CSS中，优先级和权重是一对非常重要的概念。当多个CSS规则应用于同一个元素时，就需要根据优先级和权重的顺序来决定应用哪个规则。

通常情况下，CSS选择器的权重是由其具体性和出现次数来决定的。CSS的选择器根据其特定性分为四个等级，从高到低分别是：

1. ID选择器：#id
2. 类选择器、属性选择器和伪类选择器：.class、[attribute]、:hover
3. 标签选择器和伪元素选择器：p、::before
4. 通配符选择器、子选择器和相邻选择器：*、>、+ 

基于这个规则，可以将每种选择器的权重值赋予不同的数值。具体地，ID选择器的权重是100，类选择器、属性选择器和伪类选择器的权重是10，标签选择器和伪元素选择器的权重是1，通配符选择器、子选择器和相邻选择器的权重是0。

在计算权重时，还需要考虑选择器出现的次数。如果同一选择器出现多次，则该选择器的权重值会被累加。此外，还需要注意的是，使用了内联样式（即在元素的style属性中定义样式），其权重将高于所有其他选择器。

当多个CSS规则应用于同一元素时，选择器的权重将决定哪个规则被优先应用。对于相同权重的规则，将根据它们在CSS文件中出现的顺序来确定应用顺序。

总体来说，在编写CSS规则时，应考虑到选择器的具体性和出现次数，以及它们在CSS文件中出现的顺序，以确保正确地应用所需的样式。