谈谈CSS选择器优先级和!important权重

喜欢ヅ旅行 2022-12-22 11:16 89阅读 0赞

![format_png][]

来源 | https://www.html.cn/web/css/19897.html

## CSS中的选择器优先级与!important权重    ##

*  .class选择器要高于标签选择器。
 *  \#id选择器要高于.class选择器。
 *  标签选择器是优先级最低的选择器。
 *  !important的属性它的权重值优先级最高的，大于所有的选择器。

### **标签选择器和.class选择器** ###

让我们进入标签选择器和.class选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。

代码块

<!DOCTYPE html><html lang="en">
    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>优先级</title>    <style>        h2{           color: red; /*红色*/       }       .box{            color: springgreen; /*绿色*/       }</style></head>
    <body>    <h2 class="box">微笑是最初的信仰</h2></body></html>

最终效果图：

![1595338993391363.png][]

### **.class选择器和id选择器** ###

让我们进入.class选择器和id选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。

代码块

<!DOCTYPE html><html lang="en">
    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>优先级</title>    <style>       h2{           color: red; /*红色*/       }       .box{            color: springgreen; /*绿色*/       }       #box{           color:blue; /*蓝色*/       }</style></head>
    <body>   <h2 class="box" id="box">微笑是最初的信仰</h2></body></html>

最终效果图：

![1595339001837003.png][]

### **!important权重使用** ###

现在我们知道了标签选择器优先级最低，那么笔者将标签选择器添加!important属性呢，谁的优先级更高呢？  
!important权重使用格式如下：

color: red !important; /*红色*/

注意：属性：值 !important属性值用空格隔开即可。

让我们进入 !important属性使用实践，看看!important属性威力有多大哈。

代码块

<!DOCTYPE html><html lang="en">
    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>!important使用</title>    <style>       h2{           color: red !important; /*红色*/       }       .box{            color: springgreen; /*绿色*/       }       #box{           color:blue; /*蓝色*/       }</style></head>
    <body>   <h2 class="box" id="box">微笑是最初的信仰</h2></body></html>

最终效果图：

![1595339017968022.png][]

## **总结** ##

优先级从低到高如：标签选择器、.class选择器、\#id选择器、!important属性。

本文完~

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![format_png 1][]

![format_png 2][]

点个**在看**支持我吧

![format_png 3][]

[format_png]: /images/20221120/65e74c810f2647d89a1586b07489b0c9.png
[1595338993391363.png]: /images/20221120/04332d7960154493b5f4b8c17595b285.png
[1595339001837003.png]: /images/20221120/8a8bfc87f99940dba9a0244f30d5e1b7.png
[1595339017968022.png]: /images/20221120/86603c6ff4774582b48b217ad110d618.png
[format_png 1]: /images/20221120/436f68fa9c28488e89f0aff76f790a92.png
[format_png 2]: /images/20221120/7bda36cc49af412da4d4b2b19a810a6e.png
[format_png 3]: /images/20221120/dc550e6560e74c2d8aebbcc949989dc8.png