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

废话不多说，先来上波图！！！看不清点开看哟

选择器类型（color为例）

上边的图看的清吗？点开更清楚！

基本选择器

• 通配选择器

  • *{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规则，根据特殊算法得出最终样式以应用，在以下说明中，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值大

重要说明

css选择器的特殊性计算是没有进位的，1 0 0 0永远比0 11 0 0 大，也就是说不论多少个id选择器都不如有一个内联样式的权重高，还是会走内联样式的。在编程过程中，我们一般才用简单的选择器，过度复杂的选择器首先是太耗费性能，其次是阅读性极差。目前开发过程中，只要你理解了选择器的权重计算的精髓，基本上用不着计算，一看就知道结果了。上文说的很详细是因为考虑了多种情况。

下载

附上我的脑图！！！

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

超级全的前端知识，面试必备、系统复习必备哟哟哟

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

这次真的可以不看 -----

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