前端day9-选择器进阶版

小王在学习了

于 2024-08-07 09:42:46 发布

阅读量104

点赞数 1

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

本文链接：https://blog.csdn.net/wlx2513/article/details/140977541

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器进阶</title>

    <style>
        /* 后代选择器 */
        /* 父选择器 后代选择器 {} */
        .f0 .s0 {
            color: gray;
        }

        /* 子代选择器 */
        /* 父选择器>类选择器 {} */
        .f1>.s1 {
            color: gold;
        }

        /* 并集选择器 */
        /* 选择器1,选择器2 {} */
        h1,
        h2,
        h3 {
            color: aqua;
        }

        /* 交集选择器 */
        /* 选择器1选择器2 {} */
        div.and {
            color: rgb(221, 48, 114);
        }

        /* hover伪类选择器 */
        /* 选择器:hover */
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代选择器(后代包括儿子，孙子...)  -->
    <div class="f0">
        <div class="s0">后代选择器</div>
    </div>

    <hr>

    <!-- 子代选择器 -->
    <div class="f1">
        父级<br>
        <div class="s1">儿子</div>
        <div>
            <div class="s1">孙子</div>
        </div>
    </div>

    <hr>

    <!-- 并集选择器 -->
    <h1>111</h1>
    <h2>222</h2>
    <h3>333</h3>

    <hr>

    <!-- 交集选择器 -->
    <!-- div而且是and -->
    <div class="and">交集</div>
    <div>div标签</div>
    <p class="and">p标签:and</p>

    <hr>

    <!-- hover伪类选择器 -->
    <!-- 鼠标悬停在元素上的状态 -->
    <!-- 适用于任何标签 -->
    <a href="#">鼠标悬停时候文字颜色是红色</a>

</body>
</html>