CSS3基础：继承性、优先性

最新推荐文章于 2023-06-20 21:33:40 发布

独憩

最新推荐文章于 2023-06-20 21:33:40 发布

阅读量142

点赞数

分类专栏：前端文章标签： css3 前端 html

本文链接：https://blog.csdn.net/qq_54517101/article/details/126163180

版权

前端专栏收录该内容

53 篇文章 5 订阅

订阅专栏

CSS样式具有继承性，例如：

<!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>Document</title>

    <style>
       
        div{
            color:pink;
        }
    </style>
</head>
<body>
    <div>
        <p>我是什么颜色的？</p>
    </div>

</body>

</html>

这里只设定了div的样式，但是p却可以继承得到，既字体为粉红色

但是<a>是无法完成全部继承的，因为浏览器内部给<a>自动设置了样式

行高的继承

<!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>Document</title>
    <style>
        body{
            font:12px/1.5 '微软雅黑'
        }

        div{
            color:pink;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>我是什么颜色的？</p>
    </div>
    <p >我是什么颜色的？</p>
</body>
</html>

这里设定body字体为12px大小，行高1.5倍，既18px

设定div字体是20px大小，它也会继承这个1.5倍行高，既30px

优先级，当两个样式冲突时，启用优先级大的选择器

注意，不管父辈的选择器优先级多高，继承下来的一律权重为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>Document</title>

    <style>
        body{
            color: azure !important;
        }
        p{
            color: pink;
        }
    </style>

</head>
<body>
    <p >我是什么颜色的？</p>

</body>

</html>

字体任然是pink

优先级权重叠加

例如：

    <style>

        li{
            color: green;
        }
        ul li{
            color: pink;

        }
        .nav li{
            color: blue;
        }

    </style>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>

由于li的权重是0001，ul的权重也是0001，所以ul li的权重是0002，大于li的权重，呈现粉色

如果改为：

<body>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

.nav的权重为0010，与li叠加为0011，大于0002，所以呈现蓝色

注意：权重可以累加，但是不能进位！

独憩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础：继承性、优先性

由于li的权重是0001，ul的权重也是0001，所以ul li的权重是0002，大于li的权重，呈现粉色。.nav的权重为0010，与li叠加为0011，大于0002，所以呈现蓝色。但是是无法完成全部继承的，因为浏览器内部给自动设置了样式。设定div字体是20px大小，它也会继承这个1.5倍行高，既30px。这里只设定了div的样式，但是p却可以继承得到，既字体为粉红色。这里设定body字体为12px大小，行高1.5倍，既18px。注意，不管父辈的选择器优先级多高，继承下来的一律权重为0。...
复制链接

扫一扫