zoukankan      html  css  js  c++  java
  • CSS继承性和层叠性

    一. 继承性

       1. 含义:从自己开始直到所包裹的最小的元素,都可以继承一些特有的属性。

       2. 作用范围:  a. color、text-开头的、line-开头的、font-开头的,均可以继承。

                          b. 文字样式的,都能继承;所有关于盒子的、定位的、布局的都不能继承。

       3. 实例:

       

    二. 层叠性

       1. 背景:当多个选择器同时关系到某一个标签的时候,样式以谁为准,这时牵扯层叠性,权重问题。

       2. 含义:就是CSS解决冲突的能力。(所有的权重计算,没有任何兼容性问题)。

       3. 权重计算规则

            A. 首先看是否选中了标签,如果选中了标签,那么按照(id数 > class类数 > 标签数)来计算权重,谁大听谁的;如果权重相同,以后写的为准。

            B. 如果没有选中,那么权重就是0,采取就近原则,谁隔着目标标签近,就听谁的。

       4. 经典5题:

        第1题:

            

         解释:都选中了,这个时候比较权重,答案为红色。

        第2题:

        

        解释:都没选中,权重为0;但红色描述的与span标签更近,所以答案为红色。

        第3题:

        

        解释:第二个和第三个都没选中,权重为0;第一个选中了,有权重,所以答案为绿色。

        第4题:

         

           解释:拆分开后,有三个选择器,且都选中了,第二个和第三个权重相同,所以以后写的为主,答案为绿色。

        第5题:

           

       解释:只要有一丝希望能选中目标,我们就认为选中了,至于第一个选择器的第一个div是谁,我们不需要关注,比较权重可知,答案为蓝色

    5. 权重深入

      A. 同一个标签携带了多个类名,类名之间有冲突。

      

       B. !important标记

              (1).可以给1个属性提升权重,这个属性的权重就无穷大。

              (2).该标记提升的是一个属性,而不是一个选择器。

              (3).该标记无法提升继承的权重,该是0还是0。

              (4).该标记不影响就近原则。

              案例:

              1. <p id="para1" class="spec">文字</p>

        

               2. 

        

              3. 

               

        总结: !important标记,只有作用在一个选择器包含的属性上,且该选择器选中了目标,此时!important才会起作用,对应未选中的、继承的统统不起作用

  • 相关阅读:
    [Python] 项目的配置覆盖与合并
    [PHP] dompdf 使用记录
    Ubuntu16.04 desktop 设置共享文件夹 -- 图形界面配置
    (转)你不得不看的六篇知识图谱落地好文
    转 python2 与 python3 的编码
    (转) C#使用ODP.NET(Oracle.ManagedDataAccess.dll)操作Oracle数据库
    django & celery
    (转) 解决django项目部署到nginx+uwsgi服务器后 admin页面样式消失的问题
    Ubuntu 16.04 安装 SVN-Client (RaabitVCS)
    python 2.7
  • 原文地址:https://www.cnblogs.com/yaopengfei/p/6179334.html
Copyright © 2011-2022 走看看