CSS08：关系选择器

最新推荐文章于 2024-08-30 14:40:01 发布

MNox

最新推荐文章于 2024-08-30 14:40:01 发布

阅读量60

点赞数

分类专栏：前端三剑客文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_62820255/article/details/130329203

版权

前端三剑客专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的四种选择器：后代选择器用于选取被E元素包含的F元素；子选择器选取E元素的直接子元素F；相邻兄弟选择器选取紧跟E元素后面的F；通用兄弟选择器则选取E元素之后的所有F兄弟元素，这些选择器帮助精准定位和样式化HTML元素。

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

分类：

①后代选择器

②子选择器

③相邻兄弟选择器

④通用兄弟选择器

一、后代选择器

定义：选择所有被E元素包含的F元素，中间用空格隔开

E F{}

ul li span{
            color: aqua;
        }

<ul>
        <li><span>前置</span> 列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>

二、子代选择器

定义：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

E>F{}

<!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{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>大家好哦</p>
        <ul>
            <li>
                <p>我很好</p>
            </li>
        </ul>
    </div>
    <p>我是段落</p>
</body>
</html>

三、相邻兄弟选择器

定义：选择紧跟E元素后面的F元素，用加号表示，选择相邻的第一个兄弟元素。

语法：