zoukankan      html  css  js  c++  java
  • 【WEB前端】CSS继承性和层叠性(极度重要)

    1.1 继承性

    有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

    哪些属性能继承?

    color、 text-开头的、line-开头的、font-开头的。

    这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。

    所以,如果我们的页面的文字,都是灰色,都是14px。那么就可以利用继承性:

    1    body{
    2        color:gray;
    3        font-size:14px;4    }

    继承性是从自己开始,直到最小的元素。

    1.2 层叠性

    CSS异常冲突处理能力---层叠性。

    层叠性:就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题!

    CSS像艺术家一样优雅,像工程师一样严谨。

    当选择器,选择上了某个元素的时候,那么要这么统计权重:

    id的数量,类的数量,标签的数量

    如果权重一样,那么以后出现的为准:

    如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。

    如果大家都是0,那么有一个就近原则:谁描述的近,听谁的。

    1.3 同一个标签,携带了多个类名,有冲突:

    1        <p class="spec1 spec2">我是什么颜色?</p>
    2        <p class="spec2 spec1">我是什么颜色?</p>

    和在标签中的挂类名的书序无关,只和css的顺序有关:

    1            .spec2{
    2                color:blue;
    3            }
    4            .spec1{
    5                color:red;
    6            }
    7        </style>

    1.4 !important标记

    1        <style type="text/css">
    2            p{
    3                color:red !important;
    4            }
    5            #para1{
    6                color:blue;
    7            }
    8            .spec{
    9                color:green;
    10            }
    11        </style>

    mportant是英语里面的“重要的”的意思。我们可以通过语法:

    1           k:v !important;

    来给一个属性提高权重。这个属性的权重就是无穷大。

    !important需要强调3点:

    1) !important提升的是一个属性,而不是一个选择器

    1            p{
    2                color:red !important;   → 只写了这一个!important,所以就字体颜色属性提升权重
    3                font-size: 100px ;      → 这条属性没有写!important,所以没有提升权重
    4            }
    5            #para1{
    6                color:blue;
    7                font-size: 50px;
    8            }
    9            .spec{
    10                color:green;
    11                font-size: 20px;
    12            }

    2) !important无法提升继承的权重,该是0还是0

    1         <div>
    2             <p>哈哈哈哈哈哈哈哈</p>
    3         </div>
    1          div{
    2                color:red !important;
    3            }
    4            p{
    5                color:blue;
    6            }

    由于div是通过继承性来影响文字颜色的,所以!important无法提升它的权重,权重依然是0。

    干不过p标签,因为p标签是实实在在选中了,所以字是蓝色的(以p为准)。

    3)!important不影响就近原则

    总结

  • 相关阅读:
    LintCode 82. 落单的数
    LintCode 373. 奇偶分割数组
    LintCode 2. 尾部的零
    LintCode 413. 反转整数
    LintCode 13. Implement strStr()
    串匹配
    【剑指offer】面试题 57. 和为 S 的数字
    二分查找
    整除个数
    使用Eclipse创建Web Services
  • 原文地址:https://www.cnblogs.com/perfe/p/6207716.html
Copyright © 2011-2022 走看看