精华内容
下载资源
问答
  • CSS优先级计算的规则

    2020-09-24 20:16:59
    主要介绍了CSS优先级计算的规则,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系。 如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下...
  • 1、行内样式,style属性内的特性值 1000 ;">onediv> 2、id选择器的特性值 100 #one { width:...important修饰,则优先级最高。如果特性值一样,则根据就近原则进行计算。 如:#one .two>div li 特性值为 100+10+1+1=112

    1、行内样式,style属性内的特性值 1000

    <div style="width: 100px;">one</div>
    

    2、id选择器的特性值 100

    #one {
        width: 100px;
    }
    
    <div id="one">one</div>
    

    3、类选择器、伪类选择器、属性选择器特性值 10

    /* 类选择器 */
    .one {
        width: 100px;
    }
    
    /* 伪类选择器 */
    div:first-child {
        height: 100px;
    }
    /* 属性选择器 */
    [class=one] {
        background-color: blue;
    }
    
    <div class="one">one</div>
    

    4、标签选择器、伪元素选择器特性值 1

    /* 标签择器 */
    div {
        height: 100px;
    }
    /* 伪元素择器 */
    div::after{
        content:'***';
        font-size:12px;
    }
    
    <div>one</div>
    

    5、其他选择器* 空格 + > 特性值 0

    6、计算方式如下:比如遇见一个类选择器,则选择器的特性值加10,最终计算出整个CSS选择器的特性值。如果CSS属性有!important修饰,则优先级最高。如果特性值一样,则根据就近原则进行计算。
    如:#one .two>div li 特性值为 100+10+1+1=112

    展开全文
  • 当CSS属性的效果互相抵触时,就需要计算CSS选择器的优先级。 首先,我们给选CSS择器分类: 行内样式<div style="xxx"></div>==> 标记a类 ID 选择器 ==> 标记b类 类,属性选择器和伪类选择器 =...

    当CSS属性的效果互相抵触时,就需要计算CSS选择器的优先级。

    首先,我们给选CSS择器分类:

    • 行内样式 <div style="xxx"></div> ==> 标记a类
    • ID 选择器 ==> 标记b类
    • 类,属性选择器和伪类选择器 ==> 标记c类
    • 标签选择器、伪元素 ==> 标记d类

    **计数方法:**a/b/c/d类中,出现一类,就给a/b/c/d计一个 次数。a-d从高级到低级,a类的次数高的,其样式权重高,其余bcd类无需再比较;若a类的次数相同,则比较b类,b类的次数高的,其样式高权重高,其余cd类无需再比较。以此类推到d类。(此段一共3个句号,没骗你吧

    abcd类样式 的计数,举例如下:
    {}为style的括号,*星号选择器 表示所有标签

    *{}    //a=0 b=0 c=0 d=0 最弱权重
    a:hover{}    //a=0 b=0 c=1 d=1 
    ul ol{}    //a=0 b=0 c=0 d= 2
    ul ol+li{}    //a=0 b=0 c=0 d=3 
    h1+input[type=hidden]{}    //a=0 b=0 c=1 d=3  [type=hiden]属性选择器
    ul ol li.acticce{}    //a=0 b=0 c=1 d=3 
    #ct .box p    //a=0 b=1 c=1 d=1 
    div#header :after{}    //a=0 b=1 c=0 d=2  :after伪元素
    style=""    //a=1 b=0 c=0 d=0

    另外:
    1 还有 样式覆盖
    如果上述中有 权重计数相同的样式 相互抵触,谁写在下面(谁最后被写下),谁管用,之前先写的样式都被覆盖 不管用了。

    2 上述分类是依据CSS选择器本身的优先级,大体上,从高到低 如下。其中 !important 会无视一切,包括上面的计算方法。

    • 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}
    • 作为style属性写在元素标签上的内联样式
    • id选择器
    • 类选择器=* 伪类选择器=* 属性选择器
    • 标签选择器=*为元素选择器
    • 通配符选择器
    • 浏览器自定义
      //直观理解这个顺序,也可以猜出来优先级了
    展开全文
  • css优先级计算规则

    2019-05-09 16:54:27
    最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class...

    最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧!

        特殊性

        css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

    上面这句话有两个词需要稍作解释,“声明”和“特殊性”。如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明。

        实际上,同一个元素可以使用多个规则来指定它的字体颜色,每个规则都有自己的选择器。显然最终只有一个规则起作用(不可能一个字既是红色又是绿色),那么该规则的特殊性最高,特殊性即css优先级。很多同学仅仅知道选择器优先级ID>class>元素选择器,而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢?

        选择器的特殊性值表述为4个部分,用0,0,0,0表示。

    • ID选择器的特殊性值,加0,1,0,0
    • 类选择器、属性选择器或伪类,加0,0,1,0
    • 元素和伪元素,加0,0,0,1
    • 通配选择器*对特殊性没有贡献,即0,0,0,0
    • 最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0

        例如:以下规则中选择器的特殊性分别是:    

    复制代码

    1 a{color: yellow;} /*特殊性值:0,0,0,1*/
    2 div a{color: green;} /*特殊性值:0,0,0,2*/
    3 .demo a{color: black;} /*特殊性值:0,0,1,1*/
    4 .demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
    5 .demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
    6 #demo a{color: orange;} /*特殊性值:0,1,0,1*/
    7 div#demo a{color: red;} /*特殊性值:0,1,0,2*/

    复制代码

     对照下面的demo,来验证上面几组规则的正确与否:

    复制代码

    <a href="">第一条应该是黄色</a> <!--适用第1行规则-->
    <div class="demo">
        <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则,第4行优先级高-->
        <a href="">第三条应该是黑色</a><!--适用第2、3行规则,第3行优先级高-->
    </div>
    <div id="demo">
        <a href="">第四条应该是红色</a><!--适用第6、7行规则,第7行优先级高-->
    </div>

    复制代码

    显示效果:

        分析上面的demo,要注意特殊性是怎么排序的,上面第4行和第5行规则,第4行之所以优先级比第5行高,是因为第四行特殊性值最后面是1,而第5行特殊性值最后面是0。回过头来回答文章最开始的问题,为什么ID选择器的优先级比类选择器的优先级高?实际上是因为选择器特殊性值是从左向右排序的,特殊性值1,0,0,0大于以0开头的所有特殊性值,即便它是0,99,99,99,优先级依然比1,0,0,0要低。

        前面有讲到通配选择器*的特殊性值是0,0,0,0,而元素通过父元素继承过来的样式是没有特殊性值的,所以,通配选择器定义的规则优先级高于元素继承过来的规则的优先级

        细心的同学应该已经发现了,特殊性值中的4个0中的第一个0是给谁暗箱操作内定了吗?是的!DOM中的行间样式送了点红包,于是它就牛了。行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。

     

        层叠

        假如特殊性相同的两条规则应用到同一个元素会怎样?css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性,根据前面的优先级计算规则决定哪条规则起作用,当特殊性值也一样的时候,css规则会按顺序排序,后声明的规则优先级高,成为人生赢家,当上总经理出任CEO迎娶白富美。

        我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“爱恨原则LVHA”(LoVe HAte),为什么是这个顺序?不能是其它顺序吗?

        根据css优先级计算规则,伪类的特殊性值是0,0,1,0,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

    ###########2017-5-8补充############

    有意思的是,如果某个元素class(类选择器)的数量大于255个,不同的浏览器的表现不一致,包括但不限于以下浏览器认为class选择器的优先级会超过id选择器:

    Firefox 52.0.2 (64 位)
    
    IE 11

     

    ###########################

    本文地址:http://www.cnblogs.com/wangmeijian/p/4207433.html

    By 王美建 from 博客园 原创文章,转载请保留署名及出处 

    展开全文
  • 一、什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍不同的CSS规则。 二、为什么要研究CSS优先级?CSS优先级与门户系统...

    一、什么是CSS优先级?

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍不同的CSS规则。

    二、为什么要研究CSS优先级?CSS优先级与门户系统有什么关系?

    研究CSS优先级的主要目的就是解决多个CSS选择符选中同一个元素时的冲突问题。在门户系统中,为了保证所有的页面能正常展示,几乎所有的微件及页面都有基础CSS样式,但是门户系统是开放的、个性化的平台,大部分样式都给予了用户修改权,这时自定义样式和门户基本样式就有可能产生冲突,合理使用CSS优先级可以完美的解决这些冲突。

    三、CSS优先级规则

    ◎ 每个ID选择符(#someid),加 0,1,0,0。

    ◎ 每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0

    ◎ 每个元素或伪元素(:firstchild)等,加0,0,0,1

    ◎ 其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

    按这些规则将数字串逐位相加,就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

    这样的说明或许过于复杂,具体示例如下,当两种选择符选中同一个元素时,优先级规则如下:

    h1 {color: red;}

    /* 只有一个普通元素加成,结果是 0,0,0,1 */

    body h1 {color: green;}

    /* 两个普通元素加成,结果是 0,0,0,2 */

    ——后者胜出

    h2.grape {color: purple;}

    /* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/

    h2 {color: silver;}

    /*一个普通元素,结果是 0,0,0,1 */

    ——前者胜出

    html > body table tr[id=”totals”] td ul > li {color: maroon;}

    /* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */

    li#answer {color: navy;}

    /* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */

    ——后者胜出

    从这里可以总结一个整体的规则即 id>class>普通元素 , 同类选择符条件下层级越多的优先级越高。

    除了上面的specificity还有一些其他规则

    ◎ 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如

    blah

    的样式

    https://www.jianshu.com/p/f885df5665d9

    展开全文
  • 原则一: 继承不如指定 ...CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级。 CSS
  • 基于模糊聚类的泊位分配与岸桥调度优先级计算方法.pdf
  • CSS 选择器权重优先级计算规则

    千次阅读 2018-01-09 20:23:54
    复合选择器权重就需要计算了,这里讲两种计算方法 一、加法运算  如图所示:  1.内联样式,如: style=””,权值为1000。 2.ID选择器,如:#content,权值为100。 3.类,伪类和...
  • 针对输入缓存的交换结构,提出了一种将时延与丢失率相结合计算分组优先级的算法CPC分组所属队列的队列长度值被分段离散化,与分组的时延优先级进行非线性加权,从而得到既能够反映分组时延又能反映分组队长动态变化...
  • CSS优先级计算规则

    2020-09-15 16:49:32
    CSS优先级计算规则 CSS的优先级可以分为引入优先级和声明优先级 引入优先级 CSS按照引入方式的不同可以分为:内联样式、外部样式和内部样式 内联样式:直接写在html标签内部的css样式 外部样式:使用link引入的外部...
  • ucos 任务优先级计算详解

    千次阅读 2016-09-06 11:47:39
    介绍下任务优先级小于64的情况。 1.首先看下任务优先级介绍的图片,这个图比较直观,也是中文的,从网上拷贝的: 2.几个变量说明下: OS_PRIO:可以理解为任务创建时分配的优先级,YYY表示任务优先级组,即...
  • 优先级和层叠。继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式。  css选择符分类  首先来看一下css选择符(css选择器)有哪些? ...
  • 优先级计算

    2017-07-17 13:30:34
    优先级计算 优先级数值比较:以数值大的为准 style=1000 id=100 class=10 element=1 所以有:ID>CLASS>元素>* important>内联>ID>类>标签|伪类|属性选择器>伪元素>继承>通配符
  • 介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
  • css优先级计算方法

    2018-09-05 16:50:48
    2、计算: * css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就称为层叠。 ——...
  • CSS选择器优先级计算

    2018-03-30 13:55:00
    优先级从高到低排列,浏览器优先满足前面的规则 1,!important优先级最高 2,内联样式 3,作者>读者>浏览器 4,优先级权重加法 id选择器+100/个 类/伪类选择器+10/个 元素名+1/个 5,权重值相等则...
  • 一、css的优先级  当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明。 <style> #id{ color:red; } p{ color:blue; } ...
  • CSS3的优先级计算

    2020-09-08 16:16:31
    优先级就近原则,同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: 1. 同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。 2. important 比 ...
  • css样式的优先级分为引入优先级和声明优先级。 引入优先级 引入样式一般分为外部样式,内部样式,内联样式。 外部样式:使用link引入的外部css文件。 内部样式:使用style标签书写的css样式。 内联样式:直接书写在...
  • 【CSS3】的优先级计算

    2020-09-10 09:08:42
    优先级就近原则,同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: 1. 同权重: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。 2. important 比 ...
  • Linux系统进程优先级——计算方式

    千次阅读 2018-08-05 15:23:27
    注:基于时间片轮转的实时进程的基本时间片长度与实时进程优先级无关,而依赖进程的静态优先级计算与普通进程调度计算方式一样。 PS:本人也是菜鸟,自己学习了一点就分享出来,若有纰漏欢迎指正!  
  • CSS优先级及其计算方法

    千次阅读 2018-09-27 17:02:39
    1.CSS优先级比较 !important &gt; 内联样式 &gt; id &gt; class &gt; 标签 &gt; 通配符 &gt; 继承 &gt; 默认 2.CSS权重计算 我们把特殊性分为4个等级,每个等级代表...
  • MFC四则运算有优先级的计算器 Q697901 的回答 https://ask.csdn.net/questions/697901

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 331,102
精华内容 132,440
关键字:

优先级计算