Web前端，CSS选择器进阶，复合、并集、交集、hover伪类选择器和Emmet语法的了解-CFANZ编程社区

前言

持续总结输出中，今天讲的是Web前端，CSS选择器进阶，复合、并集、交集、hover伪类选择器和Emmet语法的了解

1、复合选择器

1.1 后代选择器:空格

作用:
根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法:选择器1 选择器2 { css }

结果:
• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中，找到满足选择器2的标签，设置样式

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 找到div的儿子h2 并设置背景颜色是绿色,文字颜色白色 */
        /* 父选择器+空格+后代选择器 {} */
        div h2 {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 后代: 儿子, 孙子, 重孙子..... -->
    <h2>这是一个h2标签</h2>
    <div>
        <h2>这是div的儿子h2</h2>
    </div>
</body>
</html>

注意点:

1.2 子代选择器:>

作用:
根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法:
选择器1 > 选择器2 { css }

结果:
• 在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 空格隔开的是后代, 儿子,孙子,重孙子 */
        /* div a {
            color: green;
        } */

        /* 只想选中儿子a */
        /* div的儿子a文字颜色是绿色 */
        div>a {
            color: green;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

注意点:

2、并集选择器

作用:
同时选择多组标签，设置相同的样式

选择器语法:
选择器1 ，选择器2 { css }

结果:
• 找到选择器1 和选择器2 选中的标签，设置样式

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* p div span h1 文字颜色是绿色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <p>ppp改变信念是很难的，你不可能因为学了前面的知识就能马上把固定型思维换成新的成长型思维，这需要练习。随着新的信念和想法越来越强，你才能逐渐获得新的思考和处理方式。</p>
    <div>div说到想法和信念，不得不提大脑的运作方式。</div>
    <span>span很多人都认为，有的人天生聪明，有的人就是天生比较笨。但最新的研究证明：大脑更像肌肉——它会发生改变，而且你越使用它，它就变得越强壮。</span>
    <h1>h1你学习新事物时，大脑里那些微小的连接就会增加，大脑会成长，变得更强壮。</h1>

    <h2>h2你越挑战自己的思维去进行学习，你的大脑细胞就会越多。</h2>
</body>
</html>

注意点:

3、交集选择器

作用:
选中页面中同时满足多个选择器的标签

选择器语法:
选择器1选择器2 { css }

结果:
• (既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* p {
            color: red;
        } */

        /* .box {
            color: red;
        } */

        /* 必须是p标签,而且添加了box类 */
        /* p.box {
            color: red;
        } */
        /* #dilireba {
            color: red;
        } */

        .box1 {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
    <p class="box box1" id="dilireba">这是p标签:box</p>
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

注意点:

4、hover伪类选择器

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

选择器语法:
选择器:hover { css }

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }

        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
    <div>div</div>
</body>
</html>