CSS_关系选择器_css关系选择器

作者：运维做开发 | 2024-07-07 15:51:21

踩

css关系选择器

一.关系选择器分类

后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器

二.关系选择器详解

后代选择器

定义

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

语法
```
E F{
    属性: value;
    ...
}
```

子代选择器

定义

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

语法
```
E>F {
    属性: value;
    ....
}
```

相邻兄弟选择器

定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法
```
E+F {
    属性: value;
    ....
}
```

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

语法
```
E~F {
    属性: value;
    ....
}
```

二.实例

<!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>
        /* 后代选择器 */
        ul li {
            color: aquamarine;
        }
        /* 子代选择器 */
        div>p {
            color: red;
        }
        /* 相邻兄弟选择器 */
        p+h2 {
            color: blueviolet;
        }
        /* 通用兄弟选择器 */
        p~h3 {
            color: green;
        }
    </style>
</head>
<body>
    <!-- 后代选择器的展示效果 -->
    <p>下面是后代选择器的展效果示：</p>
    <ul>
        <li>我是无序标签</li>
        <div>
            <ol>
                <li>我是有序标签</li>
                <li>哈哈~</li>
            </ol>
        </div>
        <li>我是无序标签</li>
    </ul>
    <!-- 子代选择器的展示效果 -->
    <p>下面是子代选择器的展效果示：</p>
    <div>
        <p>我是段落1</p>
        <ul>
            <li><p>我是段落2</p></li>
        </ul>
        <p>我是段落3</p>
    </div>
    <!-- 相邻兄弟选择器的展示效果 -->
    <p>下面是相邻兄弟选择器的展效果示：</p>
    <h2>我是h2标签1</h2>
    <h2>我是h2标签2</h2>
    <!-- 通用兄弟选择器的展示效果 -->
    <p>下面是通用兄弟选择器的展效果示：</p>
    <h3>我是h3标签1</h3>
    <div><p>哈哈</p></div>
    <h3>我是h3标签2</h3>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/796164