• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

css三大特性

1年前 (2021-08-05) 1061次浏览 已收录 0个评论

层叠性

原则:

  • 样式冲突,遵循就近原则,也就是执行最后一个样式
  • 样式不冲突的不会层叠,比如只冲突color,而选择器里其他样式还是按正常流程选择。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <style>
        div {
            color: red;
            font-size: 100px;
        }

        div {
            color: green;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div>测试</div>
</body>

</html>
结果演示

继承性

原则:

  • 子标签在没有指定某样式的情况下会继承父标签的某样式,如文本颜色和字号。
  • 只能继承的样式有text-、font-、line-、这些元素开头的,以及color属性。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div {
            color: red;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div>
        <p>
            测试
        </p>
    </div>
</body>

</html>
结果演示

行高的继承

优点:可以让子元素根据自己文字大小自动调整行高。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高的继承</title>
    <style>
        body {
            color: red;
            /*字号大小为30,行高为24*/
            /*font: 30px/24px;*/

            /*这个行高就是当前文字大小14px的1.5倍,也就是当前div的行高是21px*/
            font: 30px/1.5;
        }

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

<body>
    <div>测试1</div>
    <p>测试2</p>
</body>

</html>
结果演示

优先级

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

选择器的权重:

、
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        .test {
            color: red;
        }

        div {
            color: blue;
            /*级别最高
            color: blue !important;
            */
        }

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

<body>
    <div class="test" id="demo" style="color: pink;">测试</div>
</body>

</html>
结果演示

注意:继承的权重是0,不管父元素权重多高,子元素得到的权重都是0,具体请看下面代码

、
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承权重</title>
    <style>
        /*父亲的权重是100*/
        #fat {
            color: red;
        }

        /*p继承的权重还是0,故按照元素权重来比较,也就是看单独选出来的元素权重*/
        p {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="fat">
        <p>测试</p>
    </div>
</body>

</html>
结果演示

权重叠加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重叠加</title>
    <style>
        /*复合选择器会有权重叠加问题
        权重只会叠加,不会有进位的,而且叠加的是样式(原理和第一个一样:样式不冲突的不会层叠,比如只冲突color,而选择器里其他样式还是按正常流程选择)。
        */
        /*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;
        }

        /* .na li的权重 0,0,1,0+0,0,0,1=0,0,1,1 */
        .na li {
            color: blue;
        }
    </style>
</head>

<body>
    <ul class="na">
        <li>测试</li>
    </ul>
</body>

</html>
结果演示

练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        /*na li 的权重是0,0,1,1*/
        .na li {
            color: blue;
        }

        /*需要把第一个li颜色改为红色加粗
        na  的权重为0,0,1,0
        na r的权重是0,0,2,0
        */
        .na .r {
            color: red;
            font-weight: 800;
        }
    </style>
</head>

<body>
    <ul class="na">
        <li class="r">测试</li>
        <li>测试2</li>
    </ul>
</body>

</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css三大特性
喜欢 (4)

您必须 登录 才能发表评论!