CSS样式中的后代选择器和子代选择器

最新推荐文章于 2024-08-17 10:09:50 发布

枕梦

最新推荐文章于 2024-08-17 10:09:50 发布

阅读量5.9k

点赞数 1

分类专栏： HTML5+CSS 文章标签：后代选择器子代选择器

本文链接：https://blog.csdn.net/qq_37768482/article/details/70232383

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

属性的继承性：例如属性color具有继承性

当样式中的上一次有color属性时，次样式内包裹的样式都具有color的属性值

后代选择器用空格隔开；

子代选择器用">"箭头隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*后代选择器（空格）:container下的所有的div都是红色*/
     #container div{
            color: red;
        }

        /*子代选择器（箭头）：*/
        #container > div{
            color: red;
        }
        #container > .china{
            color: red;
        }

        .china1{
            color: green;
        }
    </style>
    <title>后代选择器</title>
</head>
<body>

    <div id="container">
        <div>div1</div>
        <div class="china">div2</div>
        <div>div3</div>
        <div>div4</div>
        <div class="china">div5
            <div class="china1">孙子元素div6</div>
        </div>
    </div>

</body>
</html>