Day10复合选择器

image
复合选择器分为后代选择器，子代选择器，交集选择器和并集选择器
1.后代选择器
image
即跨过父类，而在该父类下的所有该后代选择器所对应的标签都会被应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        div span{
            color: blue;
        }
    </style>
</head>
<body>
    <span>这是span标签</span>
    <div>
        <span>这是span标签的子类</span>
        <p>
        <span>这是span标签的子子类，即第一个span标签的孙类</span>
        </p>
    </div>
</body>
</html>

image
由此可见，只要是在父类下的span标签都会有变化，即子类的子类也算

2.子代选择器
image
子代选择器是在后代选择器的基础上进一步差异化对标签的应用，可以对父类下的所有子类进行进一步的选择应用,即通过>符号明确路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        div > span{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <span>儿子 span</span>
        <p>
        <span>孙子 span</span>
        </p>
    </div>
</body>
</html>

image

3.并集选择器
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        span,
        div,
        p,
        em{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <p>p标签</p>
    <em>em标签</em>
    <br><br>
    <span>span标签</span>
</body>
</html>

image

4.交集选择器
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.box{
            color: brown;
        }
        div.dox.picture{
            color: blueviolet;
            font: 50px;
        }
    </style>
</head>
<body>
    <div class="div box picture">这也是div标签</div>
    <p class="box">p标签，使用类选择器 box</p>
    <p>p标签</p>
    <div class="box">div标签</div>
</body>
</html>

image

posted @ 2025-11-02 23:51  冰涿  阅读(11)  评论(0)    收藏  举报