CSS的三大特性

最新推荐文章于 2024-09-28 15:35:33 发布

外太空程序员

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量88

点赞数 1

文章标签： css servlet 前端

本文链接：https://blog.csdn.net/qq_48516121/article/details/126874683

版权

本文通过多个示例详细解析CSS中的层叠性原则，即样式冲突时的优先级规则，以及元素间的样式继承现象。从颜色、字体大小到行高，深入探讨了不同选择器（类、ID、行内样式等）的优先级，并展示了实际代码运行结果，帮助理解CSS样式的应用和覆盖逻辑。

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

层叠性原则：如果设置了两个相同的样式，默认执行最后设置的样式，且只是不执行相同的样式，没有的样式一样执行

例题：

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            color: red;

            font-size: 16px;

        }

    </style>

</head>



<body>

    <div>

        <p>龙生龙，凤生凤。儿子继承父亲的样式</p>

    </div>

</body>



</html>

运行结果：

例题：

<title>行高的继承</title>

    <style>

        body {

            color: pink;

            /* 这里的1.5表示 行高=字体大小的1.5倍 */

            font: 12px/1.5 'Microsoft YaHei';

        }

        

        div {

            /* 子元素继承了父元素body 的行高 1.5 */

            /* 这个1.5 就是当前元素字体大小 font-size 的1.5倍  所以当前div 的行高就是21像素 */

            font-size: 14px;

        }

        

        p {

            /* 1.5 * 16= 24 像素 当前的行高 */

            font-size: 16px;

        }

        /* li 没有手动指定文字大小  则会继承父亲的 文字大小 body 是12px 所以 li 的文字大小为 12px

         当前 li 的行高就是 12 * 1.5= 18像素

         */

    </style>

</head>



<body>

    <div>

        我很帅很帅

    </div>

    <p>丑八怪就是你啊</p>

    <ul>

        <li>我没有指定文字大小</li>

    </ul>

</body>

运行结果：

例题：

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>行高的继承</title>

    <style>

        /* 优先级1最高，谁最高就用谁的样式 */

        /* 类选择器优先级4 */

        

        .test {

            color: red;

        }

        /* 元素选择器 优先级5 */

        /* 当属性后面加上了 !important 该优先级为1 */

        

        div {

            color: pink!important;

        }

        /* id选择器 优先级3 */

        

        #deee {

            color: green;

        }

    </style>

</head>



<body>

    <!-- style行内样式 优先级2 -->

    <div class="test" id="deee" style="color: purple;">css的优先级特性</div>

</body>

例题：

<title>行高的继承</title>

    <style>

        /* 父亲的权重为100 */

        #id {

            color: red;

        }

        /* 儿子 p 继承的权重为0 */

        p {

            color: pink;

        }

    </style>

</head>



<body>

    <div id="di">

        <p>丹丹宝贝，我爱你！</p>

    </div>

</body>

运行结果：

例题：

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>权重的计算</title>

    <style>

        /* 复合选择器有权重叠加的问题 

权重虽然会叠加，但是永远不会有进位*/

        /* 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;

        }

        /* .idi li 的权重是 0,0,1,0  +  0,0,0,1  =0,0,1,1 */

        

        .idi li {

            color: peru;

        }

        /* 因为11>2>1 所以执行复合选择器的颜色属性 */

    </style>

</head>



<body>

    <ul class="idi">

        <li>红烧猪蹄</li>

        <li>鱼香肉丝</li>

        <li>茄汁炒肉</li>

    </ul>

</body>

运行结果：