CSS进阶--选择器进阶

选择器进阶

1、复合选择器：

1）后代选择器（空格）：

选择器1（父）选择器2（后代） { 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的儿子p设置文字颜色是红色 */
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

2）子代选择器（>）：

选择器1（父）>选择器2（子） { 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 a {
            color: red;
        } */
        
        /* div的儿子a文字颜色是红色 */
        div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

2、并集选择器（，）：

选择器1，选择器2 { CSS }

<style>
    /* p div span h1 字体颜色为红色 */
    p,
    div,
    span,
    h1 {
        color: red;
    }
</style>

3、交集选择器（紧挨着）：

选择器1选择器2 { 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>
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p，带box类的，设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p>
    <p>ppppppppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

4、hover伪类选择器：

选择器:hover { CSS }

选中鼠标悬停在元素上的状态，设置样式。

任何标签都可以添加伪类。

    <style>
        a:hover {            
            color: red;
        }
    </style>

5、Emmet语法：通过简写语法，快速生成代码

0 条评论