css3子选择器

最新推荐文章于 2023-10-14 20:18:49 发布

Missingmusic

最新推荐文章于 2023-10-14 20:18:49 发布

阅读量346

点赞数

本文链接：https://blog.csdn.net/Missingmusic/article/details/47380633

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .parent {
            border: 1px solid red;
            height: 60px;
            margin: 5px;
        }
        .son {
            border: 1px solid red;
            height: 20px;
        }
        .descendant {
            border: 1px solid red;
            height: 10px;
            background-color: green;
        }
        /*
          元素选择器:其中E是元素，也是选择器(E表示element元素的意思)
          E {...}
          =============================================================
          class选择器:其中E是元素选择器，E.class是元素选择器和类选择器的复合选择器
          E.class {...}
          比如：div.son
          =============================================================
          属性选择器：E表示元素选择器
          E[attr=value]或E[attr]
          比如：div[id=abc]
          =============================================================
          子选择器：其中selector1、selector2都是有效的选择器
          selector1>selector2 {...}
        */
        .parent>div.son {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">
            <div class="descendant"></div>
        </div>
        <div class="son"></div>
    </div>
</body>
</html>

Missingmusic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3子选择器

html>html>head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> .parent { border: 1px solid red; height: 60px; margin: 5px
复制链接

扫一扫