通配选择器、交集并集选择器、关系选择器（萌新必看）

最新推荐文章于 2024-03-06 17:08:15 发布

尐╋猪

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量468

点赞数 2

分类专栏：前端文章标签： css javascript python java html

本文链接：https://blog.youkuaiyun.com/qq_45623543/article/details/109148383

版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文深入讲解了CSS中的通配选择器、交集选择器、并集选择器及关系选择器等核心概念。通过实例演示了如何运用这些选择器来精准地定位页面元素，并实现了样式效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《个人学习笔记十一》

通配选择器

作用：选中页面中的所有元素
语法：*{}
参考代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: blue;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h4>我想把这段文字变成蓝色</h4>
    <span>我想把这段文字背景变成黄色</span>
    <p>生活如此美好</p>

</body>

</html>

表现结果如下：
在这里插入图片描述

交集并集选择器

交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有标签（元素）选择器，必须使用元素选择器开头
示范代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span#a {
            color: red
        }
        
        h4.b {
            color: blue;
        }
        
        h4.c {
            color: blueviolet
        }
        
        .d.e {
            color: darkgoldenrod;
        }
    </style>
</head>

<body>
    <p>第一段文字，利用交集并集选择器对其进行改变</p>
    <span id="a">第一段文字，利用交集并集选择器对其进行改变</span>

    <h4 class="b">第二段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c">第三段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c">第四段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c d e">第五段文字，利用交集并集选择器对其进行改变</h4>
</body>

</html>

表现结果：
在这里插入图片描述
注意：id属性是唯一的，class不是唯一的。表现如上方代码所示。

并集选择器（选择器分组）：

作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        #a,
        .b,
        .c,
        .d.e {
            color: darkred
        }
    </style>
</head>

<body>
    <p>第一段文字，利用交集并集选择器对其进行改变</p>
    <span id="a">第一段文字，利用交集并集选择器对其进行改变</span>

    <h4 class="b">第二段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c">第三段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c">第四段文字，利用交集并集选择器对其进行改变</h4>
    <h4 class="c d e">第五段文字，利用交集并集选择器对其进行改变</h4>
</body>

</html>

表现结果：
在这里插入图片描述

关系选择器：

父元素：直接包含子元素的元素叫做父元素。
子元素：直接被父元素包含的元素叫做子元素。
祖先元素：直接或间接包含后代元素的元素叫做祖先元素。一个元素的父元素也是他的祖先元素。
后代元素：直接或间接被祖先元素包含的元素叫做后代元素。子元素也叫后代元素。
兄弟元素：拥有相同父元素的元素叫兄弟元素。
子元素选择器：

作用：选中指定父子元素内部的指定元素
语法：父元素>子元素

后代元素选择器：

作用：选中指定元素内的指定后代元素
语法：祖先后代

选择下一个兄弟：

语法：前一个+下一个

选择下面所有兄弟;

语法：兄~弟
示范代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>span {
            color: red
        }
        
        div span {
            background-color: darkseagreen;
        }
        
        div>p+h4 {
            color: deeppink;
        }
        
        span~p {
            font-size: 50px;
        }
        
        span~h4 {
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        我是一个div。
        <span>我是一个div中的span。</span>
        <p>我是一个div中的p元素
            <span>我是p中的span。</span>
        </p>
        <h4>我是div中的的h4元素。</h4>
    </div>
</body>

</html>

显示结果：
在这里插入图片描述