css 选择器 及 层叠规则 ——场景整理

时间:2020-7-28 作者:admin


废话不多说,先来上波图!!!看不清点开看哟
css 选择器 及 层叠规则 ——场景整理

选择器类型(color为例)

上边的图看的清吗?点开更清楚!
css 选择器 及 层叠规则 ——场景整理

基本选择器

  • 通配选择器

    • *{color:red}
  • 标签选择器

    • p{color:red}
  • 类选择器

    • .class-red{color:red}
  • id选择器

    • #id-red{color:red}
  • 属性选择器

    • 属性名选择

      • input[name]{color :red}
    • 属性值选择

      • input[type = 'text']{color:red}
    • 部分属性值

      • input[name ^= 'data' ]{color:red}

        • 以data开头
      • input [name $= 'data']{color:red}

        • 以data结尾
      • input[name *= 'data ']{color :red}

        • 包含data
      • input[name ~= 'data ']{color :red}

        • 以空格隔开后有data
      • input[name |= 'data ']{color :red}

        • 以data开始或为data

关系选择器

  • 后代选择器

    • div p{ color:red}

      • div的所有后代p,包含所有子孙元素
  • 子选择器

    • div > p{color:red}

      • div的子代元素p,不包含孙子元素
  • 相邻选择器

    • div + p{color:red}

      • 匹配div之后的相邻兄弟元素p,div和p需要相邻
  • 兄弟选择器

    • div ~ p{color:red}

      • 匹配div之后的所有兄弟元素p,

伪选择器

  • 伪类选择器

    • 链接伪类

      • a:link{},a:visited{},a:hover{},a:active{}
    • 位置伪类

      • p;first-child{},p:first-of-type{},p:nth-child(n){}
    • 表单伪类

      • input:check{},input:disabled{}
  • 伪元素选择器

    • p::first-letter{},p::first-line{}
    • p::before{},p::after{}

选择器层叠规则

css 选择器 及 层叠规则 ——场景整理

概念

  • 层叠是处理样式的过程。合并不同源的css规则,根据特殊算法得出最终样式以应用,在以下说明中,4.n>3.n>2.n>1.n>0.n 当样式发生冲突时,层级高的被渲染

不同方面

  • 4.0重要性(!important)

    • 4.1重要的作者样式
    • 4.2重要的用户样式
  • 来源

    • 3.0开发编写样式

      • 特殊性

        • 3.n (n可以用权重计算的
          十进制代替,本意是高位
          特殊性更高)

          • 权重解释

            • 内联样式1000

            • 非内联样式

              • ID选择器0100

              • class选择器、属性选择器、伪类选择器0010

              • 标签选择器、伪元素选择器0001

              • 关系选择器中的~+>等等 0000,
                但比没有特殊性强

              • 继承

                • 隐式继承(无代码,自动继承字体、颜色等)

                  • 没有特殊性
                • 显式继承(有代码控制)

                  • 有特殊性 0000,
                    与无特殊性产生冲突时胜出
          • 权重计算

            • 根据当前选择器用到了哪些类型的权重以及使用的次数进行相加

            • 例子

              • #header .classtop a{} 0111
              • .class1 .class2 ul li{} 0022
              • <a style = 'color:red'></a> 1000
    • 2.0用户设置样式

    • 1.0设备默认样式

  • 0.0顺序

    • 来源重要性特殊性均相同时,按照选择器在样式表中的顺序决定,后边的会覆盖前边。也就是后边的权重高,0.n中的n值大

下边真的可以不看 —–

想学习一些前端的书籍吗,我都帮你整理好啦!评论打出你想读的书,给你最全的笔记干货
超级全的前端知识,面试必备、系统复习必备哟哟哟

有想法评论提出哈,欢迎交流,小编也是渣渣一枚呢~一起进步呗

这次真的可以不看 —–

点个收藏呗,要不赞一个呗,小编手都敲累了,但还是持续加更呢~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。