技术交流QQ群:1027579432，欢迎你的加入！

  • CSS有三个非常重要的特性：层叠性、继承性、优先级

1.层叠性

  • 相同选择器设置了冲突的相同样式时，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
  • 层叠性原则：
    • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式；

    • 样式不冲突，不会层叠；


      层叠性.png

2.继承性

  • CSS中的继承：子标签会继承父标签的某些样式，如文本的颜色和字号。简单的理解就是：子承父业。
  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性；
  • 子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)
    继承性.png
  • 继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞；
行高的继承性
  • 行高可以跟单位也可以不跟单位；
  • 如果子元素没有设置行高，则会继承父元素的行高为1.5；
  • 此时子元素的行高是：当前子元素的文字大小*1.5；
  • body行高 1.5，这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高； 
<style>
    body {
        color: pink;
        /* font: 12px/24px "Microsoft YaHei"; */
        font: 12px/1.5 "Microsoft YaHei";

    }

    div {
        /* 子元素div继承了父元素body的行高1.5 */
        /* 这个1.5就是当前元素div中文字大小font-size的1.5倍 所以当前div的行高就是21px*/
        font-size: 14px;
    }

    p {
        /* 1.5*16=当前的行高 */
        font-size: 16px;
    }
    /* li没有手动指定文字大小，则会继承父亲的文字大小，即body的文字大小为12px，所以li的文字大小是12px */
    /* 当前li的行高是12*1.5px */
</style>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

3.优先级

  • 当同一个元素指定多个选择器，就会有优先级的产生；
  • 优先级规则：
    • 选择器相同时，则执行层叠性；
    • 选择器不同时，则根据选择器的权重优先执行谁

  • 不同种类的选择器权重如下所示：


    选择器权重.png
优先级注意的问题
  • 权重是由4个数字组成的，但是不会有进位的；
  • 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；
  • 等级判断从左到右，如果某一位数值相同，则判断下一位数值；
  • 简单记忆方法：通配符和继承权重为0；标签选择器为1；类(伪类)选择器为10；id选择器100，行内样式表为1000;!important无穷大；
  • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
权重叠加
  • 权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重。 
    div ul li   ----> 0,0,0,3
.nav ul li  ----> 0,0,1,2
a:hover     ----> 0,0,1,1
.nav a      ----> 0,0,1,1

4.资料下载