博学谷 - CSS笔记08 - css的三大特性

1.层叠性

• 遵循就近原则
• 样式不冲突,不会重叠

demo:

        div {
            font-size: 20px;
            color: red;
        }

        div {
            color: green;
        }

    <div>层叠性遵循就近原则,样式重复才会覆盖</div>

效果:

2.继承性

• 子标签会集成父标签的某些样式,例如(text- , font- , line- , color等)
• 可以简化代码,降低css样式的复杂性

demo:

        div {
            color: green;
        }

    <div>
        <p>p标签是子标签</p>
    </div>

效果:

行高的继承性:

• 行高可以跟单位也可以不跟单位,行高不跟单位就是父元素的N倍
• 行高可以继承父元素的行高

demo:

        body {
            /* 设置字体大小为12px,行高为字体的1.5倍 字体优先为微软雅黑 */
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        }

        p {
            /* 字体大小为14px,根据行高的继承性,行高为14*1.5=21px  */
            font-size: 14px;
        }

    <div>div元素</div>
    <p>p是子元素</p>

效果:

3.优先级

• 选择器相同,执行层叠性;选择器不同,根据选择器的权重执行
• 权重是由4组数组组成,永远不会进位,优先级是从左往右下降
• 继承的权重是0
• 复合选择器可以叠加权重

选择器	权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器,伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	无穷大

demo:

        /* 1.div标签的权重因为家里!important,所以权重是无穷大
        2.类son2的权重是0,0,1,0,继承的权重是0,0,0,0 */
        div {
            color: red !important;
        }

        .father {
            color: green;
        }

        .son1 {
            color: pink;
        }

    <div class="father">
        <div class="son1">son1</div>
        <p class="son2">son2</p>
    </div>

效果:

4.文章参考链接
a. https://www.boxuegu.com/