CSS 三大特性

CSS 三大特性： 层叠性、继承性、优先级

层叠性：同一个选择器设置相同的样式，此时就会发生样层叠，即样式覆盖。相同的样式后执行的样式起作用（样式代码行数大的起作用）

        div {
            color: red;
            color: blue;
        }

    <div>
        我显示的字体颜色是蓝色
    </div>

 

 

继承性： 子标签会继承父标签的一部分样式属性（如：text-, font-, line-, color 这些属性子元素都可以继承）

        div {
            font-size: 14px;
            color: aqua;
            /* 改变子元素的行高，即子元素的font*line-height */
            line-height: 1.5; 
        }

        /* 子元素会继承父元素的行高，即：此时 p标签的行高为 20px * 1.5  */
        p {
            font-size: 20px;
        }

    <!-- 子标签 p 会继承父标签div 的font-size和color属性 -->
    <div>
        <p>子元素可以继承父元素的一部分css属性:</p>
        <!-- 子元素会继承父元素的行高和文字大小，即：此时 div标签的行高为 14px * 1.5  -->
        <div>如：text-, font-, line-, color 这些属性子元素都可以继承</div>
    </div>

 

 

优先级：当同一个元素绑定多个选择器就会产生优先级问题，权重大的选择器css效果会被实现。

选择器的权重：继承或者通配 << 元素选择器 << 类选择器，伪类选择器 << id选择器 << 行内样式 style = "" << !important

权重叠加：n+1 个相同权重的不同的选择器权重 >  n个相同权重的不同的选择器权重; 但是一定不会出现 n+1 权重小的选择器> 一个权重大的选择器

    <style>
        /* ul li 的权重大于 继承的权重 所以中间的 li 是粉色不是红色 */
        ul li {
            color: pink;
        }

        /* 类选择器 .li1 权重 大于  ul li 的权重 所以第一个li是蓝色*/
        .li1 {
            color: blue;
        }

        /* id选择器 #li3 的权重 大于 类选择器 .li1 权重 所以最后一个li 是金色*/
        #li3 {
            color: gold;
        }
        
        div {
            color: red;
            font-size: 14px;
        }
    </style>



    <div>
        <p>选择器的权重：继承或者通配 << 元素选择器 << 类选择器，伪类选择器 << id选择器 << 行内样式 style = "" << !important</p>
        <ul>
            <li class="li1">我是蓝色</li>
            <li>我是粉色</li>
            <li class="li1" id="li3">我是金色</li>
        </ul>
    </div>