ruorbb自用|前端学习8——CSS三大特性

最新推荐文章于 2024-10-09 20:10:15 发布

xswdexgz

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量124

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/weixin_45976685/article/details/127027453

版权

本文详细介绍了CSS中的层叠性、继承性和优先级概念。层叠性用于解决样式冲突，遵循就近原则；继承性允许子元素继承父元素的部分样式，如颜色和字体大小；优先级则根据选择器类型确定样式应用的顺序。通过实例展示了如何运用这些原则解决实际样式设置中的问题，并探讨了权重计算和复合选择器的影响。

摘要由CSDN通过智能技术生成

层叠性、继承性、优先级

1、层叠性

主要解决样式冲突的问题。

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。

层叠性原则：样式冲突，就近原则（后来者居上）

样式不冲突，不会覆盖。

2、继承性（子承父业）

子标签会继承父标签的某些特性（text-、font-、line-这些元素开头的可以继承，以及color属性）

<style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙</p>
    </div>
</body>

（1）行高的继承性

行高可以跟单位，也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高为1.5

此时子元素的行高是：当前子元素的文字大小*1.5

body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小调整行高

 body {
            color: pink;
            font: 12px/1.5 'Microsoft yahei';
        }
        div {
            子元素继承了父元素body的行高 1.5
            这个1.5 就是当前元素文字大小 font-size * 1.5= 21
            font-size: 14px;
        }
        p {
            16 * 1.5 =24 当前的行高
            font-size: 16px;
        }

        li 没有手动指定的文字大小，则会继承父元素的文字大小 12px ，所有li的文字大小为12px
    </style>
</head>
<body>
    <div>memory</div>
    <p>memory</p>
    <ul>
        <li>I have no fixed height</li>
    </ul>
</body>

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

    <style>
        div {
            color: pink;
        }
        .test {
            color: red;
        }
    </style>
</head>
<body>
    <div class="test">smile</div>
</body>

1.选择器相同，则执行层叠性

2.选择器不同，则根据选择器权重执行

    <style>
        div {
            color: pink !important;
        }

        .test {
            color: red;
        }

        #domo {
            color: green;
        }
    </style>
</head>

<body>
    <div class="test" id="domo" style="color:purple;">smile</div>
</body>

【注意】

1.权重是由四位数字组成，但是不会有进位

2.等级判断从左向右，如果某一位数值相同，则判断下一位数值

3.继承的权重是0

（1）权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重


        /* 复合选择器会有权重叠加的问题 */
        /* ul li的权重是0，0，0，1+0，0，0，1=0，0，0，2 */
        ul li {
            color: green;
        }

        /* li的权重是0，0，0，1 */
        li {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>猪蹄子</li>
        <li>肘子</li>
        <li>猪尾巴</li>
    </ul>