css的三大特性（第十一课）

五寸执念*

于 2024-10-09 21:14:59 发布

阅读量580

点赞数 6

分类专栏：前端文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2302_76722613/article/details/142795331

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、层叠性

二、继承性

三、优先级

一、层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖(冲突)另外一个冲突的样式

层叠行原则：

①样式冲突遵循就近原则，那个离结构近就执行那个样式

②样式不冲突则不会层叠

例子：

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

        div {
            color: aqua;
        }
    </style>
</head>

<body>
    <div>语句依次执行，效果取决于最后的样式执行语句</div>
</body>

其实为了更加深刻理解可以认为先执行了color：red；本来是红色，但是后面又执行了color：aqua；所以颜色最终为水绿色

二、继承性

子标签会继承父标签的某些样式，如文本颜色和字号(text-，font-，line-，color)，恰当的使用继承可以简化代码，降低css的复杂性

例子：

    <style>
        div {
            color: aquamarine;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙凤生凤，老鼠的儿子会打洞</p>
    </div>
</body>

p标签继承了父标签div的某些样式

特殊行高的继承

例子：

    <style>
        div {
            font: 12px/1.5 Mcrosoft YaHei;
        }

        p {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>行高继承1
        <p>行高继承2</p>
        <span>行高继承3</span>
    </div>

</body>

父级标签div的样式为字体大小为12px，行高为12*1.5=18px；p标签自己设置了字体大小为20px，所以行高也变成了20*1.5=30px；span未设置字体大小所以继承div父级标签，字体大小为12px，行高为12*1.5=18px。

三、优先级

当一个元素指定多个选择器，就会有优先级的产生，选择器不同，按选择器权重执行对应样式

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important 重要的	无穷大

    <style>
        div {
            color: red;
        }

        .color {
            color: aqua;
        }
    </style>
<div class="color">
    看看最终到底是什么颜色
</div>

    <style>
        div {
            color: red;
        }

        .color {
            color: aqua;
        }

        #one {
            color: black;
        }
    </style>
<div class="color" id="one">
    看看最终到底是什么颜色
</div>

    <style>
        div {
            color: red;
        }

        .color {
            color: aqua;
        }

        #one {
            color: black;
        }
    </style>
<div class="color" id="one" style="color: green;">
    看看最终到底是什么颜色
</div>

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

        .color {
            color: aqua;
        }

        #one {
            color: black;
        }
    </style>
<div class="color" id="one" style="color: green;">
    看看最终到底是什么颜色
</div>

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

        p {
            color: blueviolet;
        }
    </style>
<div>
    <p>看看最终到底是什么颜色</p>
</div>

权重叠加会叠加但永远不会进位的情况

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

        /* 权重0，0，0，1+0，0，0，1=0，0，0，2 */
        ul li {
            color: aqua;
        }

        /* 权重0，0，1，0+0，0，0，1=0，0，1，1 */
        .nav li {
            color: chartreuse;
        }
    </style>
<body>
    <ul class="nav">
        <li>apple</li>
        <li>pear</li>
        <li>banana</li>
        <li>peach</li>
    
    </ul>
</body>