精华内容
下载资源
问答
  • css选择器权重计算

    2017-12-29 09:14:25
    css选择器权重计算方式
    选择器 权重
    !important Infinity
    行间样式 1000
    id选择器 100
    class选择器/属性选择器/伪类选择器 10
    标签选择器/伪元素 1
    通配符* 0

    权重值为256进制,应以256进制相加计算。
    所以一个class选择器权重大于10个标签选择器的权重

    展开全文
  • 介绍CSS中,单个选择器,以及复合选择器权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器权重,区别其优先级,判 断最终样式的覆盖效果。
  • 在讲CSS 选择器权重计算与优先级之前,我们先来了解一下CSS是用来干什么的?CSS是用来通过添加样式使网页更加美观,也就是说CSS是利用选择器来美化网页的,使用户可以在网页上更清晰地找到自己需要的东西。 CSS添加...

    作者:WangMin
    格言:努力做好自己喜欢的每一件事
    CSDN原创文章
    博客地址 👉 WangMin

    在讲CSS 选择器权重计算与优先级之前,我们先来了解一下CSS是用来干什么的?CSS是用来通过添加样式使网页更加美观,也就是说CSS是利用选择器来美化网页的,使用户可以在网页上更清晰地找到自己需要的东西。

    在这里插入图片描述
    CSS添加样式的方式:

    • 有内部样式(内部样式就是在html文件中通过标签来添加样式)
    • 外联样式(通过标签将外部的样式css文件引入到html文件中)
    • 还有行间样式,即在元素标签中通过style=" "添加样式;

    而添加样式是通过CSS选择器选择指定的标签进行添加的,那么什么是CSS选择器呢?它是怎么起作用的呢?它们之间的优先级是怎样来区别的呢?

    样式类型

    1、行间样式

    就是在一个标签内,直接添加一个 style=‘ ’ ,然后在这里面添加你说需要对标签描述的属性及属性值。格式如下:

    <h1 style="font-size:12px;color:#000;">我是行间CSS样式。</h1>
    

    2、内联样式

    <head>头部标签中添加 <style type="text/css"> 标签,然后在里面添加对应选择器及其对选择器描述的属性及属性值。格式如下:

    <style type="text/css">
      h1{font-size:12px;
          color:#000;
          }
    </style>
    

    3、外部样式

    单独将对选择器及其对选择器描述的属性及属性值写入到一个css文件中,然后将这个文件以以下方式引入到HTML文件的<head>头部标签中。

    <link rel="stylesheet" href="css/style.css">
    
    选择器的种类
    选择器 表现形式
    ID #id,例如:id=“name”,id=“name_txt”
    class .class,例如:class=“name”,class=“name_txt”
    标签 p,例如:body,div,p,ul,l
    属性 [type=‘text’]
    伪类 :hover,例如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。
    相邻选择器、子代选择器 > +,例如:div>p,带大于号>
    css的权重

    每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值”。css通过css选择器的权重占比,来计算css选择规则的总权值,从而确定 定义样式规则的 优先级次序;也就是说css选择规则的优先级 是按照 css选择器的权值的比较 来确定的,选择器的权值越大就优先级就高,优先级越高就决定了该元素在页面中的最终呈现的效果。

    css权重的计算规则

    权值等级划分, 一般来说是划分4个等级:

    类型 权重
    内联样式 如: style=" ",权值为1000。
    ID选择器 如:#name,权值为0100。
    class类选择器,伪类和属性选择器 如.name,权值为0010。
    标签选择器和伪元素选择器 如div p,权值为0001。

    通配符、子选择器、相邻选择器等的。如: *、>、+,权值为:0000。
    继承的样式没有权值,通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

    !important

    !important 的作用是提升优先级,换句话说。加了这句的样式的优先级是最高的(比内联样式的优先级还高)。

    css优先级规则
    • css选择规则的权值不同时,权值高的选择器优先;
    • css选择规则的权值相同时,后定义的选择器规则优先;
    • css属性后面加 !important 时,无条件绝对优先;

    总体来说: !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器,注意: !important规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他对该元素的声明,无论它处在声明列表中的哪个位置。但注意使用!important样式很难调试,因为它改变了你样式本来的权值规则。

    权值如何进行比较

    当两个权值进行比较的时候,是从高到低逐级将等级位上的权重值(如 权值 1000,0,0,0 对应–> 第一等级权重值,第二等级权重值,第三等级权重值,第四等级权重值)来进行比较的,而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的,换句话说,低等级的选择器,个数再多也不会越等级超过高等级的选择器的优先级的。

    当两个权值进行比较时,从高位到低位逐位进行比较,从高等级开始比较,如果相同等级的权值相同,再继续进行下一个等级的比较。如果不相同,直接应用相同等级权值比较大的选择器对应的样式。而不是把四个等级的权值加起来进行比较。如果某个样式后面加了 !important,则绝对优先,比内联样式更优先。下面就来举例说明一下吧!

    案例1:

    <div id="box">
    	<p class="text">CSS 选择器权重计算与优先级</p>
    </div>
    
    #box p{
    	width:300px;
    	line-height: 30px;
    	color:#333;
    	background:#ccc;
    }
    div p{
    	width:300px;
    	line-height: 40px;
    	color:#fff;
    	background:#f00;
    }
    

    执行效果如下:
    在这里插入图片描述
    在这里插入图片描述

    我这里给div中的p进行了两种方式的添加样式(ID选择器+标签选择器、标签选择器+标签选择器),这里根据以上权重值的比较,将第一种方式第一级ID选择器(#box)与第二种方式的第一级标签选择器进行权重比较,因为ID选择器(#box)的权重值为0100,而标签选择器(div)的权重值为0001,所以这里的#boxdiv 优先级要高,网页中显示的就#box p{…}中添加的样式。

    案例2:

    <div id="box">
    	<p class="text">CSS 选择器权重计算与优先级</p>
    </div>
    
    #box .text{
    	width:300px;
    	line-height: 30px;
    	color:blue;
    	background:lightgoldenrodyellow;
    }
    #box p{
    	width:300px;
    	line-height: 40px;
    	color:#fff;
    	background:#f00;
    }
    

    执行效果如下:
    在这里插入图片描述
    在这里插入图片描述
    我这里给div中的p进行了两种方式的添加样式(ID选择器+类选择器、ID选择器+标签选择器),这里根据以上权重值的比较,将第一种方式的样式添加的第一级ID选择器(#box)与第二种方式的样式添加的第一级ID选择器(#box)进行权重比较,因为两个都是ID选择器,权重一致都是0100,所以我们要对两种方式第二级选择器进行比较,第一种方式的第二级选择器为类选择器(.text)权重为0010,第二种方式的第二级选择器为标签选择器(p)权重为0001,因为(.text)权重要大于(p)权重,所以网页中显示的就#box .text{…}中添加的样式。

    案例3:

    <div id="box">
    	<p class="text">CSS 选择器权重计算与优先级</p>
    </div>
    
    #box .text{
    	width:300px;
    	line-height: 30px;
    	color:blue;
    	background:lightgoldenrodyellow;
    }
    #box p{
    	width:300px;
    	line-height: 40px;
    	color:#fff;
    	background:#f00!important;
    }
    

    执行效果如下:
    在这里插入图片描述
    在这里插入图片描述
    这里我举的例子跟案例2是大致一样的,但细心的你们可能发现了我给第二种方式的background属性小小的改动了一下,给它添加了一个!important,根据上面css优先级规则的第三条:css属性后面加 !important 时,无条件绝对优先。所以即使第一种整体的权重值比第二种整体的权重值要高,但第二种方式中的background属性添加了 !important 比第一种方式中的background:lightgoldenrodyellow权重要高,所以网页中div的背景色采用的是第二种方式的background属性。

    案例4:

    <div id="box">
    	<p class="text">CSS 选择器权重计算与优先级</p>
    </div>
    
    #box .text{
    	width:300px;
    	line-height: 30px;
    	color:blue;
    	background:lightgoldenrodyellow;
    }
    #box .text{
    	width:300px;
    	line-height: 40px;
    	color:#fff;
    	background:#f00!important;
    }
    

    执行效果如下:
    在这里插入图片描述

    在这里插入图片描述
    从上面css中可以看到两个选择器是一样的,所以它们的权重值是一样的。根据上面css优先级规则的二条:css选择规则的权值相同时,后定义的选择器规则优先,所以网页中显示的是后面定义的#box .text{…}中的样式。

    案例5:

    <div id="box">
    	<p class="text" style="background:blueviolet;line-height: 25px;color:#fff;">CSS 选择器权重计算与优先级</p>
    </div>
    
    #box .text{
    	width:300px;
    	line-height: 30px;
    	color:blue;
    	background:lightgoldenrodyellow;
    }
    

    执行效果如下:

    在这里插入图片描述

    在这里插入图片描述

    上面的例子,我给p标签添加了行间样式,根据css优先级规则: !important>行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器,所以p标签的行间样式地优先级比#box .text{…}要高,页面显示的是p标签的行间样式的效果,又因为p标签的行间样式中没有width这个属性,所以页面显示的是#box .text{…}中width这个属性。也就是说行间样式和相应选择器中都有的属性,优先执行行间样式的属性,没有的属性就在相应选择器中去找。

    以上我只对二级选择器之间的权重问题进行了举例说明,多级选择器之间的权重比较是一样的比较方式。


    以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!

    展开全文
  • CSS 选择器权重计算规则  其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。 一、样式类型  1、行间 我的行间CSS样式。    2、内联 h1{font-size:12px; color:#...
    下面从网易代码规范中摘抄的内容,学习他们确定选择器等级的方式。最近看了《精通CSS》,这部分内容应该是从2.3节摘抄来的。
    选择器等级

    a = 行内样式style。

    b = ID选择器的数量。

    c = 类、伪类和属性选择器的数量。

    d = 类型选择器和伪元素选择器的数量。

    选择器 等级(a,b,c,d)
    style=”” 1,0,0,0
    #wrapper #content {} 0,2,0,0
    #content .dateposted {} 0,1,1,0
    div#content {} 0,1,0,1
    #content p {} 0,1,0,1
    #content {} 0,1,0,0
    p.comment .dateposted {} 0,0,2,1
    div.comment p {} 0,0,1,2
    .comment p {} 0,0,1,1
    p.comment {} 0,0,1,1
    .comment {} 0,0,1,0
    div p {} 0,0,0,2
    p {} 0,0,0,1

    将等级转换为数,即为样式表的权重。
    展开全文
  • Css选择器权重计算

    2020-01-02 21:36:07
    css选择器权重计算 • 不同的选择器有不同的权重值: 内联样式:权重是 1000 id选择器:权重是 100 类、属性、伪类选择器:权重是 ==10 == 元素选择器:权重是 1 通配符:权重是 0 计算权重需要将一个样式的全部...

    css选择器权重的计算

    • 不同的选择器有不同的权重值:

    • 内联样式:权重是 1000
    • id选择器:权重是 100
    • 类、属性、伪类选择器:权重是 ==10 ==
    • 元素选择器:权重是 1
    • 通配符:权重是 0

    计算权重需要将一个样式的全部选择器相加,比如上边的body h1的权重是20,h1的权重是10,所以第一个选择器设置的样 式会优先显示。

    展开全文
  • CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级。一:优先级等级划分:第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元素样式,它拥有最高优先级...
  • css选择器权重及其计算规则

    千次阅读 2019-04-23 08:38:40
    文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID #id class .class 标签 p 通用 * 属性 [type=“text”] 伪类 :hover 伪元素 ::first-...
  • css 选择器权重计算

    2020-06-17 20:32:44
    权重: 行内样式 1000 id选择器 0100 class选择器、类相关的属性选择器 0010 ...权重会根据选择器叠加 body .x:权重11 class[name]:权重20 类+类的属性选择器 body .class[name]:权重21 ...
  • CSS选择器权重计算与优先级 选择器有优先级,可以通过权重来计算优先级。 一:优先级 等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元素样式,它拥有最高...
  • 优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。当同一个...
  • 1.CSS优先级: !important > 行内样式 > ID选择器 > class选择器 || 属性选择器 >... 标签选择器、类型选择器、伪元素选择器,如div p,权重1; 通配符、子选择器、相邻选择器,如*、>
  • CSS选择器权重计算

    2019-09-26 04:18:38
    CSS各种选择器权重: 1.ID选择器 +100 2.类、属性、伪类选择器 +10 3.元素、伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id .link a[href] ----- #id(100) + .link(10) +a...
  • CSS基础篇选择器权重 就单论css权重这个知识点,据说有很多在大厂里面的前端工程师都有些人不知道这个知识点,所以学到就是赚到,下面就让我举几个例子带大家感受一下权重的重要性吧! 权重计算的特点:只要写在...
  • css 选择器权重计算规则及!important 添加css4种方法:链接外部,导入外部,内部样式表和行间。 优先级看似是行间&amp;amp;gt;内部&amp;amp;gt;链接样式&amp;amp;gt;导入样式,ID&amp;amp;gt;...
  • ——《css权威指南》优先级是决定不同选择器的相同样式规则对同一元素的生效情况,优先级高的将覆盖优先级低的样式规则。而优先级又受到样式来源和选择器特殊性的影响,下面我们一起来了解以下。一、样式类型&lt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,107
精华内容 7,642
关键字:

css选择器权重计算方式