13.关系选择器_关系选择器例子-CSDN博客

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113816921

本文详细介绍了CSS中的关系选择器，包括子元素选择器（例如`div>span`），后代选择器（例如`div span`），以及兄弟选择器的两种形式：下一个兄弟（例如`p+span`）和下边所有此类兄弟（例如`p~span`）。通过实例展示了如何使用这些选择器来精准地定位和样式化页面元素。

摘要由CSDN通过智能技术生成

文章目录

关系选择器

关系选择器

父元素
	-直接包含子元素的元素
子元素
	- 直接被父元素包含的元素
祖先元素
	- 直接或间接包含后代元素的元素
	- 一个元素的父元素也是他的祖先元素
后代元素
	- 直接或间接被祖先元素包含的元素
	- 一个元素的子元素也是他的后代元素
兄弟元素
	- 拥有相同父元素的元素

1.子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /**
            为div的子元素span设置红色字体
            子元素选择器：
                作用：选中指定父元素的指定元素
                语法：父元素 > 子元素{}
         */
        div > span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p中的span元素</span>
        </p>
        <span>我是div中的span元素</span>
    </div>
</body>
</html>

只影响子元素的span，如下图：
在这里插入图片描述

如果我们想要让div下的p下的span变成绿色，则代码如下(对于本案例，也可以直接用 p > span)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        div > p > span{
            color: green;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p中的span元素</span>
        </p>
        <span>我是div中的span元素</span>
    </div>
</body>
</html>

显示如下：
在这里插入图片描述

2.后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /**
            后代元素选择器：
                作用：选中指定元素内的指定后代元素
                语法：祖先 后代
         */
        div span{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p中的span元素</span>
        </p>
        <span>我是div中的span元素</span>
    </div>
</body>
</html>

div中后代的span都会被影响，如下图：
在这里插入图片描述

3.兄弟选择器

3.1.下一个兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /**
            选择下一个兄弟：
                语法 前一个 + 下一个
         */
         //p隔壁的span变成粉色（如果不在p隔壁，则无效）
        p + span{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p中的span元素</span>
        </p>
        <span>我是div中的span元素1</span>
        <span>我是div中的span元素2</span>
        <p>我是第二个p</p>
        <h2>我是h2</h2>
        <span>我是div中的span元素3</span>
        <span>我是div中的span元素4</span>
        <span>我是div中的span元素5</span>
        <span>我是div中的span元素6</span>
    </div>
</body>
</html>

显示如下：
在这里插入图片描述

3.2.下边所有此类兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <style>
        /**
            选择下边所有兄弟：
                语法 兄 ~ 弟
         */
        p ~ span{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p中的span元素</span>
        </p>
        <span>我是div中的span元素1</span>
        <span>我是div中的span元素2</span>
        <p>我是第二个p</p>
        <h2>我是h2</h2>
        <span>我是div中的span元素3</span>
        <span>我是div中的span元素4</span>
        <span>我是div中的span元素5</span>
        <span>我是div中的span元素6</span>
    </div>
</body>
</html>