精华内容
下载资源
问答
  • css选择器优先级
    2022-06-13 19:39:29

    css选择器优先级的判定规则:

    权重之和,和越大,越优先,和一样,后者覆盖前者。!important(权重:无穷)>内联式(即行内样式)(1000)>id选择器(100)>类选择器、伪类选择器、属性选择器(10)>标签选择器和伪元素选择器;(1)>通用选择器、相邻兄弟选择器(+)、兄弟选择器(~)、子选择器(>)(0)>继承(了解)>默认(了解)
    如下:
    1、css 属性 !important

    2、内联式(即行内样式)

    <元素 style=" 属性:属性值; "></元素> // 权重1000
    

    3、id选择器

    #id名{ 属性:属性值;} // 权重100
    

    4、类选择器、伪类选择器、属性选择器

    .类名{ 属性:属性值;} // 权重10
    
    元素:hover { 属性:属性值; }
    
    input[type="text"]{ 属性:属性值; }
    具体举例如:
    input[type="text"]
    {
        width:150px;
        background-color:yellow;
    }
    

    5、标签选择器和伪元素选择器;

    标签 { 属性:属性值;} // 权重1
    
    // 伪元素选择器:例如:
    ::after, ::before, ::fist-inline, ::selection等
    ::after { 属性:属性值; }
    

    6、通用选择器、相邻兄弟选择器(+)、兄弟选择器(~)、子选择器(>)

    *{ 属性:属性值;} // 权重0
    
     h1+p{ // 相邻兄弟选择器(+)
                color:red;
            }
    
      h1 ~ p{ //兄弟选择器(~)
            color:red;
        }
    
    html > body table + ul {margin-top:20px;} //子选择器(>)
    
    更多相关内容
  • CSS选择器优先级

    千次阅读 2022-02-14 11:07:06
    CSS选择器优先级 工作中修改css样式时,是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个地方就不一样了 改了个标签结果把样式改乱了… ​ 几乎所有的...

    CSS选择器优先级

    工作中修改css样式时,是不是会经常遇到
    写的css样式不生效
    改这个地方结果别的地方样式也跟着一起变了
    明明是一样的css代码为啥换个地方就不一样了
    改了个标签结果把样式改乱了…

    几乎所有的样式冲突、样式覆盖等问题都与css声明的优先级错位有关

    那css优先级的计算规则是什么?
    如何避免样式冲突、样式覆盖的问题呢

    css选择器的基本概念

    1 选择器、选择符、伪类、伪元素

    1 选择器

    标签选择器 div span p li …
    类选择器
    属性选择器

    2 选择符

    空格选择符表示后代关系
    >表示父子关系
    +表示相邻兄弟关系
    ~表示兄弟关系
    双管道||表示列关系

    3 伪类
    特征是前面会有一个冒号(:),通常与浏览器行为和用户行为有关,例如

    :hover 
    :focus
    :active 
    :visited
    

    4 伪元素
    特征是前面会有两个冒号(::),常见的有

    ::after
    ::before
    ::first-letter
    ::first-line
    

    css选择器的优先级

    css优先级有着明显不可逾越的优先级制度

    css优先级规则

    1 0级 通配选择器(*)、选择符 和 逻辑组合伪类

    逻辑组合伪类,这些伪类并不影响优先级,起影响作用的是括号内的选择器

    :not()
    :is
    :where
    

    2 1级 标签选择器

    3 2级 类选择器、属性选择器 和 伪类

    .foo
    [foo]
    :hover
    


    4 3级 ID选择器

    #demo {}
    

    5 4级 style 属性内联

    <span style="color:#CCC">优先级</span>
    

    6 5级 !important

    !important是顶级优先级,可以重置JavaScript设置的样式,唯一推荐使用的场景就是使JavaScript设置的无效对于其他场景,没有使用的理由,最好不用,用别的方案替代

    CSS选择器优先级计算规则

    数值计数法:每一段css语句的选择器都对应一个具体的数值,数值越大优先级越高,其中的css语句就优先被渲染。其中,出现一个0级对应的数值+0,1级选择器数值+1,2级选择器数值+10,3级选择器数值+100

    ps 这里的10 不是说真的10个1级选择器的权重等于1个2级选择器,只是一个相对的概念。
    但是在IE浏览器里256个1级选择器是会覆盖1个2级选择器的。

    *01 * 0
    dialog11 * 1
    ul > li22 * 1 + 1 * 0
    li > ol + ol33 * 1 + 2* 0
    .foo101 * 10
    a:not([rel=nofollow])111 + 1 *0 + 1 * 10
    a:hover111 + 1 * 10
    ol li.foo121 + 0 + 1 + 10
    li.foo.bar211 + 10 + 10
    #foo100100
    #foo .bar p111100 + 10 + 1
    <html lang="zh-CN" >
     <body class="foo">我的颜色是?<body>
    <html>
    
    body.foo:not([dir]) { color:red }
    
    html[lang] .foo {color:blue}
    

    当css选择器的优先级数值一样的时候,后渲染的css选择器的优先级更高。并且这个后渲染是相当于整个文档流的,而不是单个的文件。

    增加css优先级的小技巧

    常见的增加优先级的方式是

    • 增加嵌套 .father .foo 或者 增加一个标签选择器 div.foo
    • 使用!mportant
    • 使用id选择器

    但这样做会出现的问题有
    1 出现耦合,父子关系变化之后代码会无效
    2 嵌套层级过深之后修改出来会非常的痛苦
    3 换标签了样式也会失效
    4 一用!important只要覆盖就得同样用

    小技巧
    1 叠加自身 .foo.foo
    2 叠加属性选择器 .foo[class]

    css选择器的命名

    面向属性的类名

    定义

    选择器的命名是跟着具体的css样式走的,与项目、模块、页面统统没有关系。比如

     .clearfix::after {
        display: block;
        content: "";
        clear: both;
      }
      
      
      .dn {display:none}
      .db {display:block}
      .df {display:flex}
      .tl {text-align:center}
    

    使用场景

    细枝末节、特殊场景的微调可以使用面向属性的命名

    .keydata-top-list .keydata-top-item .noLink:hover {
        cursor: default;
    }
    
    .cur-def {
       cursor: default;
    }
    

    面向语义的命名

    根据元素所处的上下文命名。比如 .header .title .desc

    优点缺点
    面向属性的类名重用性高,方便快捷适用场景优先
    面向语义的命名灵活丰富,应用场景广泛代码笨重,效率一般

    命名的小技巧

    1 从HTML标签中找灵感

    header body aside section main nav footer content detail
    
    .my-header
    .my-body
    .my-aside
    

    2 从HTML特定的属性中找灵感

    checkbox radio email number color time url
    

    3 css伪类和HTML布尔属性作为状态管理类名,比如
    .active 来自于 :active
    .disable 来自于 :disable
    .selected 来自于HTML的selected属性
    .checked
    .invalid

    我们一般的用法是在状态类属性下面写当前状态下的样式,但这样会造成一个后果就是代码容易造成代码冲突,所以状态类名下最好不要有css样式,就当成一个状态标识符来用,让其跟其他类名组合使用

    .my-content {
    
    }
    
    .active.my-content {
    
    }
    

    css选择器使用的最佳实践

    命名

    1 使用小写,使用英文单词或者缩写,专有名词可以使用拼音,例如 maoyan
    不建议使用驼峰,驼峰命名建议留给js使用

    2 命名组合,以短横线混合使用,组合个数不超过5个

    .evaluation-card-info-detail-grid-title
    

    3 设置统一前缀,强调品牌同时避免样式冲突

    选择器类型的使用

    1 不要使用id选择器

    因为id选择器的优先级太高了,并且和JavaScript耦合,实在要用可以使用属性选择器[id=“foo”]

    2 不要嵌套选择器 ,不使用标签选择器,建议使用无嵌套的纯类名选择器

    a 渲染性能糟糕

    CSS选择器是从左往右进行匹配渲染的,.box div 是先匹配的页面上所有的div,再匹配的.box类名元素,如果页面上内容丰富、HTML的结构又比较复杂的话,就会产生明显的渲染性能问题

    b 优先级混乱

    .project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a

    如果想要覆盖这段样式的方法,只有
    1 写在这段代码后面
    2 以更多的嵌套覆盖
    3 使用id选择器
    4 使用!important

    c 样式布局脆弱

    .project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a

    HTML里不用a标签了,那这段样式就失效了,一般大家改的时候不大会记得还需要改css的,改css也得去css文件里找到;或者HTML的结构变了,删除了某个层级,就增加了查找问题和修改问题的时间

    展开全文
  • 主要介绍了关于CSS选择器优先级的判断并附结果截图,需要的朋友可以参考下
  • CSS选择器优先级详解

    千次阅读 2021-03-26 20:52:08
    欢迎访问个人博客网站: ...1. 优先级分级 按照优先级从高到低排列: 1. ! important .foo{ color:red !important } ...important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设置的样式,使...3. ID选择器 #foo{ colo

    1. 优先级分级

    按照优先级从高到低排列:

    1. ! important

    .foo{
    	color:red !important
    }
    

    !important是顶级优先级,唯一推荐使用它的场景为忽略JS脚本设置的样式,使js设置样式无效。对于其他场景都没有使用它的理由,切勿滥用

    2. style属性内联样式

    <span style="color:red">红色</span>
    

    3. ID选择器

    #foo{
    	color:red
    }
    

    4. class类选择器,属性选择器和伪类

    .foo{
    	color:red 
    }
    [disabled]{
    	color:red 
    }
    :hover{
    	color:red
    }
    

    5. 标签选择器

    body{
    	color:red 
    }
    

    6. 通配选择器,选择符和逻辑组合伪类

    *{
    	color:red 
    }
    :not(){
    	color:red 
    }
    

    统配选择器统一指*

    选择符包括+,-,~,空格和||

    逻辑组合伪类包括:not(),:is(),:where()等,这些伪类本身并不影响CSS优先级,影响优先级的是()里的选择器

    2. 优先级计算

    除开!important和style属性内联样式(因为一个第一顶级的优先级,另一个是写在HTML标签属性上的第二顶级优先级),在CSS样式中写的选择器样式的优先级满足以下计算规则:

    • 每出现一个ID选择器,优先级数值+100
    • 每出现一个class,属性或伪类选择器,优先级数值+10
    • 每出现一个标签选择器,优先级数值+1
    • 每出现一个通配选择器,选择符和逻辑组合伪类,优先级数值+0
    • 继承的CSS样式优先级为0
    • 若两个选择器最终优先级计算数值相等,则后渲染的选择器优先级更高(后渲染是相对整个HTML文档的CSS样式渲染顺序来讲的,并非单个CSS文件)

    示例:

     	/*优先级为1+0+10=11*/
        a:not([rel=nofollow]){
    
        }
        /*优先级为1+10+0+10=21*/
        body.foo:not([dir]){
    
        }
    
        /*优先级为100+10+1=111*/
        #foo .bar p{
    
        }
    

    增加CSS选择器优先级的方法:

    实际开发调节样式时,难免会遇到需要增加CSS选择器优先级去匹配样式的场景,

    .foo{}
    

    很多人是采取增加CSS样式嵌套来增加优先级数值的做法,如下:

    .father .foo{}
    

    但是这种做法增加了CSS样式与HTML结构的耦合度,降低了可维护性。

    下面是一种推荐的做法:

    /*重复选择器自身即可*/
     .foo.foo{}
    

    3. 注意事项

    • CSS选择器优先级与DOM元素的层级位置没有关系

      示例:

    <div class="foo">
      是的
    </div>
    
    body .foo{
            color:red
        }
    html .foo{
         color:blue
     }
    

    这里虽然第二个选择器在第一个选择器渲染后,但有人会考虑到body是html的子元素,距离.foo元素更近,所以应该是红色。但是DOM层级距离是对CSS选择器优先级没有任何影响的,所以按照优先级数值相等,后渲染优先的原则,.foo元素是蓝色

    • 选择器优先级越级现象

    示例:

      	#text{
            color:red
        }
        .text{
            color:blue
        }
    
    <span class="text" id="text">颜色是?</span>
    

    根据id选择器 优先级大于class选择器的原则可知应该是红色。但是如果是下面这种情况呢?

        /*如果有256个.text组合而成的选择器*/
        .text.text.text.text...{
            color:blue
        }
    

    有人认为class选择器优先级数值为10,如果同时256个,那肯定比只有一个id的id选择器优先级高!

    实际上,在过去大多浏览器确实是这样的,FireFox浏览器早年的源码表示class类名以8字节字符串存储,所能容纳的最大值为255,超过就会溢出到ID选择器区域。

    但是后来除了IE浏览器,其他浏览器都修改了策略——再多的选择器优先级也无法超过比它更高一级的选择器

    所以这里的文字颜色依然是红色

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

    2022-06-25 07:04:57
    本篇文章讲述了css不同的中级选择器在进行同一标签内同一样式设置时,浏览器是听谁的去进行该样式的修饰渲染

    css选择器优先级问题(选择器的权重图)

    A.为啥有此问题的产生?

    a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的。

    b.对于单一的选择器而言,优先级别有固定的顺序,按照这个优先级别去设置同一样式,就不会出现样式覆盖,但是如果遇到了中级选择器(如派生选择器),该如何判断优先级别呢?

    因此就提出了选择器权重规则

    B.选择器权重图如下所示:

    选择器权重
    !important无穷大
    行内样式(标签里面写style)1000
    id选择器100
    类选择器(class)10
    属性选择器([属性名=属性值])10
    伪元素10
    标签选择器§1
    伪类1
    通配符0

    C.中级选择器甚至更复杂的选择器如何进行权重的计算呢?

    1.以下面的源代码为例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择器权重问题</title>
       <style type="text/css">
           div > #content span{
               color: brown;
               font-family: "宋体";
           }
           div .one span{
               color: pink;
               font-family: "楷体";
           }
       </style>
    </head>
    <body>
        <div>
            <div class="one" id="content"><span>坚持,不只是为了离梦想更近一步</span></div>
            <div></div>
            <div></div>
        </div>
    </body>
    </html>
    

    2.分析

    选择器的执行顺序是从上往下的

    那么div .one span这个选择器在 div > #content span选择器之后,为啥不会显示后者所编写的css样式,而是选择显示前者的css样式呢?
    我们给div .one span选择器取名为m,div > #content span选择器取名为n

    那么m的权重=标签选择器权重×1+类选择器权重×1+标签选择器×1

    ​ =1+10+1=12

            n的权重=标签选择器权重×1+id选择器权重×1+标签选择器×1

    ​ =1+100+1=102

    m的权重<n的权重

    因此n的优先级别高,不用管其在css里面的位置,只要写了,就一定是它优先执行

    不会被后面比它优先级小的选择器修改样式

    总结:复杂的选择器权重=单个选择器权重之和

    3.运行结果

    在这里插入图片描述

    展开全文
  • 1. 选择器越具体,其优先级越高 2. 相同优先级,出现在后面的,覆盖前面的 3. 属性后面加 !important 的优先级最高,但是要少用 具体CSS 2.1 规格文档的权威算法:(但并不适用于 CSS 3) 属性赋值,层叠...
  • css选择器优先级

    2018-10-30 22:05:03
    最初接触css选择器优先级这一块的内容的时候,是以下面这张图为准: ,按照上图进行计算,但是我昨天看了一篇文章发现这样算是错误的。 文章地址:...
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级...
  • CSS选择器优先级顺序是什么

    千次阅读 2021-08-13 14:46:26
    css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级顺序...
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级...
  • css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友,带来些许帮助
  • 主要帮助大家深入理解CSS选择器优先级的相关内容,通过八个小例子分析比较CSS选择器优先级,感兴趣的小伙伴们可以参考一下
  • 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,...
  • 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 权重大小: 1、内联样式,如: style="...",权值为1000。 2、ID选择器,如:#content,权值为0100。 3、类,伪类、属性选择器,...
  • CSS 优先规则4: 计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大
  • CSS选择器优先级以及权重计算方法

    千次阅读 2021-09-14 14:52:57
    今天面试面试面试官提问了选择器优先级的问题,本身是知道这个问题的答案的,由于第一次面试紧张,各种选择器的名字被置于脑后,一切的根源还是因为不够熟悉,所以通过这篇博客加强并深入了解选择器优先级的问题。...
  • 3.类属性伪类选择器 a)类选择器 应用于对应class的元素css中用.后跟class名来标记 如header{display:none;} <div class=header</div> ;b属性选择器 属性选择器应用于对应class的元素css中用[]标记中html元
  • Css选择器优先级

    2022-03-22 21:45:59
    Css选择器优先级
  • CSS选择器 优先级

    2019-12-18 11:07:30
    一、css选择器优先级 css选择器可以为拥有指定属性的 HTML 元素设置样式,主要包含标签选择器器、类选择器、id选择器以及群组选择器等等。 1、css选择器的分类 1.1 标签选择器 标签选择器:用标签名称即可 会选择...
  • 声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过 @import 导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后。
  • Css选择器优先级顺序

    2022-01-26 16:55:44
    ID选择器; 类选择器 属性选择器 属性选择器 伪类选择器 为元素选择器。 标签选择器 通配符选择器
  • 关于css选择器优先级

    2019-09-12 16:52:41
    1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被...由于该方法会造成CSS的难以管理,所...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,503
精华内容 21,401
关键字:

css选择器优先级

友情链接: 新建文件夹.zip