CSS基础-11-组合选择符（后代选择器，子元素选择器＞，相邻兄弟选择器 +，后续兄弟选择器 ~）

玄德公笔记

已于 2022-11-18 23:52:54 修改

阅读量629

点赞数

分类专栏： # CSS基础教程文章标签： css 基础教程选择器子元素选择器相邻兄弟选择器

于 2022-04-25 22:48:18 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123536108

版权

CSS基础教程专栏收录该内容

19 篇文章 3 订阅

订阅专栏

文章目录

1. 后代选择器
2. 子元素选择器
3. 相邻兄弟选择器
4. 后续兄弟选择器

选择器	分隔	示例
后代选择器	空格	div p
子元素选择器	>	div > p
相邻兄弟选择器	+	div + p
普通兄弟选择器	～	div ~ p

1. 后代选择器

表现
本div内，直接或间接下级p都会影响。
实现

div p
{
  background-color:yellow;
}

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>蜀</title>
    <style>
        div p {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p>div的同级p，之前</p>
    <div>
        <p>div 的直接下级p</p>
    </div>

    <div>
        <span>
            <p>div 的间接下级p</p>
        </span>
    </div>

    <p>div的同级p，一号</p>
    <p>div的同级p，二号</p>
</body>

</html>