CSS选择器优先级详解

约定不等于承诺〃 2022-03-30 14:07 424阅读 0赞

### CSS选择器优先级详解 ###

*  选择器类型
 *  选择器优先级权重
 *  特殊情况
 *  动手试试

# 选择器类型 #

开发者在使用CSS进行网页开发时需要使用选择器来指定样式要应用的元素，在开发时主要有以下几种选择器。

*  `id`：以元素的id作为选择器，例如：

#foo { 
      color: red;
    }

*  `class`：以元素的class作为选择器，例如：

.bar { 
      color: red;
    }

*  `tag`：以元素的标签（tag）作为选择器，例如：

p { 
      color: red;
    }

*  `*`：选中全部元素，这种情况下的样式会被应用在所有的元素上，例如：

* { 
      color: red;
    }

除了用CSS给元素加样式，在HTML中也可以给元素加上行内样式，例如：

这行代码在网页中会渲染出红色的文字。

# 选择器优先级权重 #

当计算优先级时，我们可以使用`0, 0, 0, 0`四个数位对一个选择器的优先级进行计算权重，这四个数位的从左至右优先级递减，也就是最左边的一位优先级最高。

在比较优先级时，先看两个选择器不为0的最高位，位更高的优先，如`1, 0, 0, 0`选择器优先级高于`0, 1, 0, 0`的选择器。

如果最高位相同，则比较最高位的大小，如果仍相同则比较下一位的大小，以此类推，如`0, 2, 0, 0`优先级高于`0, 1, 0, 0`，`0, 2, 1, 0`优先级高于`0, 2, 0, 0`。

那么，如何将一个如`#foo .bar p { color: red }`这样的选择器转化为四个数位的优先级呢？规则如下：

*  `第一数位 - 行内样式`：使用行内样式时样式的优先级是`1, 0, 0, 0`，例如：

<p style="color: red">I'm red</p>

*  `第二数位 - id选择器`：选择器中每有一个id，会给选择器优先级的第二位加1的权重，例如：

/* 0, 2, 0, 0 */
    #first #second { 
      color: red;
    }
    
    /* 0, 1, 0, 0 */
    #second { 
      color: blue;
    }

这时候如果我们有如下的HTML：

<div id="first">
      <p id="second">Hello</p>
    </div>

网页中的文字`Hello`的颜色就会被渲染为红色，因为第一个选择器的优先级更高。

*  `第三数位 - class选择器`：选择器中每有一个class，会给选择器优先级的第三位加1的权重，例如：

/* 0, 0, 2, 0 */
    .one .two { 
      color: green;
    }
    
    /* 0, 0, 1, 0 */
    .two { 
      color: yellow;
    }

这时候如果我们有如下的HTML：

<div class="one">
      <p class="two">Hello</p>
    </div>
    <p class="two">World</p>

网页中的文字`Hello`会被渲染为绿色，`World`会被渲染为黄色。

*  `第四数位 - 标签选择器`：选择器中每有一个标签（tag），会给选择器优先级的第四位加1的权重，例如：

/* 0, 0, 0, 2 */
    div p { 
      color: orange;
    }
    
    /* 0, 0, 0, 1 */
    p { 
      color: purple;
    }

这时候如果我们有如下的HTML：

<div>
      <p>Hello</p>
    </div>
    <p>World</p>

网页中的文字`Hello`会被渲染为橙色，`World`会被渲染为紫色。

我们再来看几个`id`，`class`和`tag`被组合在一个选择器中时的例子：

/* 0, 1, 2, 1 */
    #first .one.two > p { 
       color: red;
    }
    
    /* 0, 2, 1, 1 */
    #first #second > div.one { 
       color: blue;
    }

# 特殊情况 #

还有一些特殊的选择器，它们不在刚刚的四数位权重之中，我们来讨论一下这些特殊情况。

*  `!important`：这是CSS中的一个关键字，它具有超越一切的权重，如果选择器中有这个关键字，即使是行内样式也会被它覆盖，例如：

<p class="foo" style="color: red;">Hello</p>
    <p class="bar" style="color: red;">World</p>

.foo { 
      color: blue !important;
    }
    
    .bar { 
      color: blue;
    }

根据刚才的权重规则，行内样式有比class更高的优先级，但是由于`!important`的存在，使得例子中`Hello`显示为蓝色，而`World`按优先级规则显示为红色。

注意：不推荐在实际开发中使用`!important`关键字，请尽量用其他方法代替。

*  `*`：这是CSS中选择全部元素的选择器，它具有非常低的优先级，相当于`0, 0, 0, 0`，任何行内样式、id选择器、class选择器或者是标签选择器都会覆盖它，例如：

<div>Hello</div>
    <p>World</p>

* { 
      color: red;
    }
    
    p { 
      color: blue;
    }

网页中的文字`Hello`被`*`选择器命中，渲染为红色，`World`被优先级更高的标签选择器命中，渲染为蓝色。

*  `继承样式`：HTML中如果子元素会自动从父元素继承样式，它具有最低的优先级，相当于`0, 0, 0, 0`，任何行内样式、id选择器、class选择器、标签选择器，甚至是选择全部元素的选择器，都会覆盖它，例如：

<p>
      <span>Hello</span>
    </p>

p { 
      color: green;
    }
    
    * { 
      color: yellow;
    }

如果没有`*`选择器的内容，`Hello`会被渲染为绿色，因为它继承了父元素的样式，与继承相比，`*`选择器优先级更高，所以在这里`Hello`被渲染为黄色。

# 动手试试 #

为了更清楚地让大家了解CSS选择器优先级在网页中呈现的效果，我在CodePen上准备了可以执行查看效果的代码，喜欢的话可以[动手试试][Link 1]。

[Link 1]: https://codepen.io/dakoala/pen/EGEqbv

CSS选择器优先级详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS选择器及优先级

相关 CSS选择器优先级

相关 CSS选择器优先级

相关详解CSS选择器、优先级与匹配原理

相关 CSS的选择器，优先级

相关 css选择器优先级

相关详解CSS选择器、优先级与匹配原理

相关 CSS选择器优先级比较

相关 CSS选择器优先级详解

相关 CSS选择器优先级