正文

css中选择器优先级与!important权重使用

lonelyxmas  2022-02-13  344

关键词：

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

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

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

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

Copy
<!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>

结果图

.class选择器和id选择器#

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

Copy
<!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>

结果图

!important权重使用#

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

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

注意：属性：值 !important属性值用空格隔开即可。
让我们进入 !important属性使用实践，看看!important属性威力有多大哈。
代码块

Copy
<!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>

结果图

总结#

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

css的优先级与继承

CSS的优先级（权重）1、!important;优先级最高2、内联样式表的优先级10003、id选择器优先级1004、class选择器优先级105、html标签选择器优先级16、优先级一样，后面的覆盖前面的按这些规则将数字符串逐位相加，就得到最终的权重例... 查看详情

css样式优先级及穿透

参考技术ACSS优先级是根据等级的值相加得出选择器的权重来决定的。!important>行内样式>ID>类、伪类、属性>标签名>继承>通配符计算权重方式：从图上看讲权重分为：1. 第一等：代表内联样式，如:style=””，权... 查看详情

css选择器的优先级及权重问题css核心问题

1.CSS选择器优先级: !important>行间样式>id>class和属性选择器>标签选择器>通配符选择器注意：[初级工程师水平]2.之所以有优先级问题，归根到底是这些选择器有权重的，权重值越大，优先级越... 查看详情

css选择器

一、选择器优先级（权重）选择器行内样式（内联样式）id选择器类选择器/属性选择器/伪类选择器标签选择器权重1000100101!importan简介　　语法格式：{cssRule!important}，即写在定义的最后面；　　声明了!important的样式，具有... 查看详情

css中的权重

...层叠样式表的来源。如果多个样式作用在元素上就会产生优先级权重的问题。零、属性后面使用!important，权重最大，会覆盖页面内任何位置定义的元素样式。一、内联样式，权重为1000【写在HTML元素的style属性中】二、ID选择器... 查看详情

css选择器优先级

1.CSS选择器判断过程：第一步：判断选择器的权重(多重组合样式同理，多个class<一个id);权重从大到小依次为:!import元素行内样式ID选择器伪类选择器/属性选择器>类选择器tag标签选择器*通配符继承第二步:同种类型的权重判断... 查看详情

csscss特性③(css优先级|权重叠加计算公式)(代码片段)

...基础选择器权重表格,进行权重叠加计算;CSS选择器选择器优先级-权重计算继承父标签的样式,*通配符选择器0,0,0,0标签选择器0,0,0,1类选择器，链接伪类选择器0,0,1,0ID选择器0,1,0,0标签的行内样式style属性1,0,0,0样式后添加!important... 查看详情

!important，权重问题

...作用：用来提升某个直接选中标签的选择器中某个属性的优先级的，可以将被指定的属性的优先级提升为最高2.优先级的权重作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高谁的id最多谁的... 查看详情

csscss特性③(css优先级|优先级引入|选择器基本权重)(代码片段)

文章目录一、CSS优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS优先级1、优先级引入定义CSS样式时,可能出现多个类型相同的规则定义在同一个元素上,如果CSS选择器相同,执行CSS层叠性,根据就近原则选择执行的样... 查看详情

css权重优先级

从CSS代码存放位置看权重优先级：内嵌样式>内部样式表>外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。从样式选择器看权重优先级：important>内嵌样式>ID>类>标签|伪类|属性选择&g... 查看详情

css选择器的权重与优先规

我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。4个等级的定义如下：第一等：代表内联样式，如:style=””，... 查看详情

css选择器的优先级

　　!important作为优先级最高的选择器,在样式仍然有冲突的情况下,依旧要按照优先级顺序进行比较　　-----选择器优先级顺序为: !important>行内样式>ID选择器>类选择器、伪类选择器>元素、为元素、属性选择器>通配... 查看详情

css选择器的优先级

...看地址(https://www.cnblogs.com/hleisurely/p/12836777.html)1.选择器的优先级!important的优先级别最高权重值为1111用来提升某个直接选中标签的选择器中某个属性的优先级的，可以将被指定的属性的优先级提升为最高第一等级：内联样式如:sty... 查看详情

css的优先级和权重问题以及!important优先级

...如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？二、正文：　　先上一个例子<divid="outerId"class="outerClass"><divid="innererId"class="in 查看详情

css优先级

/*div{ color:red; }*/ /*标签选择器权重0,0,0,1小组长*/ div{ color:pink!important; } /*类选择器权重0,0,1,0班长*/ .one{ color:blue; } /*id选择器权重0,1,0,0班主任*/ #two{ color:green; } /*style=行内样式表权重1,0,0,0校长* 查看详情

css中选择器优先级的权重计算

CSS中选择器优先级的权重计算先看一段代码，如下：a{color:red;}#boxa{color:green;}[class="box"]a{color:gold;}.boxa{color:brown;}pa{color:yellow;}</style><pid='box'class="box"&a 查看详情

css权重

CSS的权重指的是选择符的优先级，优先级高的CSS选择符所设置的样式会覆盖优先级低的选择符所设置的样式。权重越高优先级越高，计算权重有一定的规则。计算CSS权重首先需要了解CSS的6中选择器。1.ID选择器例如：#read_title{}2.... 查看详情

css选择器及其权重

css选择器:.class,#id,*,element(标签选择器),[attribute]属性选择器,:first-child(伪类选择器)权重!important>行内样式>ID选择器>类选择器|属性选择器|伪类选择器>元素选择器尽量避免使用!important覆盖!important<divid="app"><di... 查看详情