精华内容
下载资源
问答
  • CSS选择器优先级浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上。CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态...

    CSS选择器优先级

    浏览器是通过判断CSS优先级,来决定到底哪些属性值是与元素最为相关的,从而作用到该元素上。CSS选择器的合理组成规则决定了优先级,我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态,下面我们来具体了解下CSS选择器优先级及权重。

    CSS选择器如何计算?

    当CSS选择器权重相同,则最后的声明的CSS选择器覆盖靠前的 CSS。

    CSS优先级是根据由每种选择器类型构成的级联字串计算而成的,它不是一个对应相应匹配表达式的权重值。

    相同CSS表达式,在DOM结构中的距离是不会对元素优先级计算产生影响的。

    CSS优先级顺序

    下列是一份优先级逐级增加的选择器列表:

    通用选择器

    元素(类型)选择器

    类选择器

    属性选择器

    伪类

    ID 选择器

    内联样式

    多重样式(Multiple Styles)

    如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

    一般情况下,优先级为:(外部样式)External style sheet 

    有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

    示例如下:

    h3{color:green;}

    welcome sojson.com

    20180413172101.png

    结果:标签内的数据显示为蓝色

    CSS 优先级规则:

    选择器都有一个权值,权值越大越优先。

    当权值相等时,后出现的样式表设置要优于先出现的样式表设置。

    创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。

    继承的CSS 样式不如后来指定的CSS 样式

    在同一组属性设置中标有“!important”规则的优先级最大。

    CSS !important 规则实例:

    #redP p{

    color:#00f !important;

    color:#f00;

    }

    color

    color

    展开全文
  • CSS选择器优先级

    2020-11-08 14:46:37
    CSS选择器优先级 在写CSS样式时,你会发现一个问题就是当使用不同的CSS选择器去写同一个元素时,浏览器应该优先选择哪个呢。浏览器会认为哪个的优先级高呢。 什么是 CSS 选择器优先级 CSS 选择器优先级是指在给 ...

    CSS选择器优先级

    在写CSS样式时,你会发现一个问题就是当使用不同的CSS选择器去写同一个元素时,浏览器应该优先选择哪个呢。浏览器会认为哪个的优先级高呢。

    什么是 CSS 选择器优先级

    CSS 选择器优先级是指在给 HTML 元素应用样式时,如果有多个 CSS 选择器同时指向了这个元素,那么优先级高的选择器的样式会最终应用到这个元素上。

    举例说明

    我将将举几个例子来简单的说明一下,如果你想知道更加深入可以去看一下这篇文章,网址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

    1.就近原则

    当选择器优先级相同时,浏览器会根据就近原则(人可以理解就近原则,但是浏览器是计算出来。不要认为它很聪明,可以理解你的想法)选择里离元素最近的样式。

    比如我要为文字设置颜色,那么下面的样式中浏览器会选择那个显示呢。

    <style>
            p{
                color: red;
            }
            p{
                color: blue;
            }
        </style>
    

    在这里插入图片描述

    浏览器最终显示是的结果是蓝色,打开谷歌浏览器进入F12你会看到,最前面的样式被浏览器给划掉了,只剩下了一个blue。(注:行数越大,离元素就越近)。
    在这里插入图片描述

    2.计算特殊性

    浏览器有一个规则:通过选择器,计算出一个四位数(xxxx )

    1. 千位:如果是内联(行内)样式,记1,否则记0
    2. 百位:等于选择器中所有id选择器的数量
    3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
    4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量

    下面的HTML代码中,文字应该是是什么颜色呢。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* id选择器 */
            #content{
                color: red;
            }
            /* 类选择器 */
            .test{
                color: green;
            }
            /* 元素选择器 */
            p{
                color: blue;
            }
           
        </style>
    </head>
    <body>
        <p class="test" id="content" style="color: orange;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, ipsum.</p>
    </body>
    </html>
    

    根据规则很明显,结果是橘色。行内样式是值是最大的为1000,id选择器为100,类选择器为10,元素选择器为1。浏览器应该优先选择行内样式。打开F12可以看到这样的结果:
    在这里插入图片描述

    当去掉行内样式时,最终文字的颜色为红色。 打开F12可以看到这样的结果:
    在这里插入图片描述
    浏览器不按就近原则来,而是根据自身计算结果来选择样式。所以你的想法‘不重要’,重要的是浏览器应该怎么‘想’。

    展开全文
  • css选择器优先级

    2018-10-30 22:05:03
    最初接触css选择器优先级这一块的内容的时候,是以下面这张图为准: ,按照上图进行计算,但是我昨天看了一篇文章发现这样算是错误的。 文章地址:...

    最初接触css选择器优先级这一块的内容的时候,是以下面这张图为准:
    css选择器优先级 ,按照上图进行计算,但是我昨天看了一篇文章发现这样算是错误的。

    文章地址:https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

    他里面讲的css选择器是按照如下的这种方式计算优先级的:
    css选择器优先级

    看到上面图我就突然想到css选择器优先级会不会是按照位数来计算的,随后我尝试用11个class去覆盖1个id的样式,但是覆盖失败,所以最初的那种计算方式是错误的,随后我接着查找看到了下面这篇文章:有趣:256个class选择器可以干掉1个id选择器

    根据里面的例子在IE下面256个class选择器可以干掉1个id选择器,计算机信息都是以二进制存储的,8位就是00000000-11111111,有2^8种变化,也就是256种变化,那这么说浏览器存储class的形式就是按照位数来进行计算的,但是256个class选择器在非IE下是干不掉1个id选择器,可能是以更大的16位来算吧(或者是做了不溢出的判断),例如上面文章中说到的Opera浏览器。

    之所以最初的那种计算方式没有出过错,是因为我们很少去定义这么多的选择器,但是我们还是需要知道一些极限问题,这样更有利于我们进行编码。

    所以关于css的优先级计算问题请记住 style > id > class / 属性选择器 / 伪类选择器 > 元素 / 伪元素,不要想着去用 后面的选择器 靠溢出覆盖 前面选择器 的样式,一般采用同级别去覆盖。

    例如:

    <div style="color: #f00;" id="blue" class="green">123456</div>
    
    body #blue {
        color: #00f;
    }
    html body .green {
        color: #0f0;
    }
    div {
        color: #333;
    }
    
    color规则styleidclass元素
    #f001000
    #00f0101
    #0f00012
    #3330001

    color规则从左侧一列一列作对比,#f00的style为1,其他的为0,所以最终采用样式为#f00,就不再往后考虑。

    还有就是CSS规则中如果有多个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素。

    以下列出的几种选择器的优先级是不断递增的(以下内容摘自:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity):

    1. 类型选择器(也叫元素选择器或者标签选择器,例如 h1)和 伪元素(例如 ::before)
    2. 类选择器 (例如 example),属性选择器(例如 [type=“radio”]),伪类(例如 :hover)
    3. ID选择器(例如 #example)
    4. 内联样式即直接在标签上面通过style定义的样式
    5. !important,当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。当前如果想要覆盖 !important ,也可以通过在样式定义再通过id/class等去覆盖。

    通配选择符(*),关系选择符 (+, >, ~, ’ ') 和 否定伪类(:not()) 对优先级没有影响。(但是在 :not() 内部声明的选择器是会影响优先级)。

    展开全文
  • 主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
  • 优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。当同一个...

    优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

    而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。

    当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。

    优先级的计算

    优先级的计算首先是选择器权重的优先级计算,然后是声明先后顺序的优先级计算。

    选择器优先级的权重计算

    选择器的权重并不是网上很多人说的

    选择器通过权重值 1(div等)、10(class)、100(id)

    这样的方式进行的,这只是别人理解出来的东西,真正的计算原理可以翻阅W3C文档选择器权重的计算。

    count the number of ID selectors in the selector (= A)

    count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)

    count the number of type selectors and pseudo-elements in the selector (= C)

    ignore the universal selector

    翻译过来:

    先比较iD选择器的数量a,再比较类选择器、属性选择器和伪类的数量b,然后比较类型(标签)选择器和伪元素的数量c,最后忽略掉通用选择器

    通配选择符(universal selector)(*), 关系选择符(combinators) (+, >, ~, ' ') 和 否定伪类(negation pseudo-class)(:not()) 对优先级没有影响。(但是,在 :not() 内部声明的选择器是会影响优先级)。

    声明先后顺序

    当 A 、B 、C 所计算的权重都相等时(ABC三个值相等)相等时,后面声明的值将会是最终的计算值。

    最终得到了CSS属性的值。

    CSS权重关系图

    4afc05f40bca74abca5787ba76c24d8b.png

    展开全文
  • CSS选择器 优先级

    2019-12-18 11:07:30
    一、css选择器优先级 css选择器可以为拥有指定属性的 HTML 元素设置样式,主要包含标签选择器器、类选择器、id选择器以及群组选择器等等。 1、css选择器的分类 1.1 标签选择器 标签选择器:用标签名称即可 会选择...
  • CSS 选择器优先级

    2021-09-26 20:40:04
    当使用不同的选择器,选中同一个元素时,并且设置相同的样式时,这时样式之间产生冲突,最终到底采用哪个选择器定义的样式,由选择器优先级决定。 规则:(由上至下,优先级依次降低) !important 行内样式 1000 ...
  • css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 打造全网web前端全栈...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,839
精华内容 18,335
关键字:

css选择器优先级