css中继承

_处女座程序员的日常

已于 2022-03-20 14:05:09 修改

阅读量257

点赞数 2

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

于 2022-03-20 13:59:20 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/123612065

版权

前端同时被 2 个专栏收录

344 篇文章 11 订阅

订阅专栏

css

108 篇文章 0 订阅

订阅专栏

子元素会继承父元素的某些CSS属性

通常，跟文字内容和字体相关的属性都能被后代元素继承。继承是可以一层一层传递下去的！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            color: red;
            font-size: 2em;
            line-height: 2.5;
            background: lightblue;
            text-align: center;
        }

        body{
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate, corrupti perspiciatis. Sint officiis molestias repudiandae nihil perspiciatis, quidem dolor odio in dicta, quam officia quia assumenda. Modi qui voluptatem repellat!
        </p>

        <ul>
            <li>Lorem.</li>
            <li>Pariatur?</li>
            <li>Architecto.</li>
            <li>Quo.</li>
            <li>Tenetur.</li>
            <li>Molestiae!</li>
            <li>Repellat.</li>
            <li>Mollitia.</li>
            <li>Itaque.</li>
            <li>Tempore!</li>
        </ul>
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptates sit amet iure. Vero nesciunt porro sapiente dignissimos commodi officia, nihil a. Explicabo, a. Quia modi dolorum architecto molestiae vero.
        </div>
    </div>
</body>

</html>

给container设置属性后，p元素和li元素都会生效。
在这里插入图片描述
从控制台中也可以清晰的看出来那些属性是继承来的

_处女座程序员的日常

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中继承

子元素会继承父元素的某些CSS属性通常，跟文字内容和字体相关的属性都能被后代元素继承。继承是可以一层一层传递下去的！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
复制链接

扫一扫