CSS中的多种关系选择器

后代选择器

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

例;

html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是后代选择器</p><!--/*该p标签不是continer的后代所以其没有发生改变*/-->
    <div class="continer">
        <div>
            <p>我是后代选择器</p>
            <p>我是后代选择器</p>
            <div>
                <p>我是后代选择器</p>
            </div>
        </div>
    </div>
</body>

子代选择器

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

例:

html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer>p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是子代选择器</p><!--/*该p标签不是continer的后代所以其没有发生改变*/-->
    <div class="continer">
            <p>我是子代选择器</p>
            <p>我是子代选择器</p>
            <div>
                <p>我是子代选择器</p><!--/*该p标签不是continer的直接子元素所以其没有发生改变*/-->
            </div>
    </div>
</body>

相邻兄弟选择器

选择进更E元素后的F元素,用+号来表示,选择相邻的第一个兄弟元素。(只能向下选择)。

例:

html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer+p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是相邻兄弟选择器</p><!--/*相邻兄弟选择器只能向下选择*/-->
    <div class="continer"></div>
            <p>我是相邻兄弟选择器</p>
            <p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的第一个相邻兄弟元素所以其没有发生改变*/-->
            <div>
                <p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的兄弟元素所以其没有发生改变*/-->
            </div>
</body>
</html>

通用兄弟选择器

选择E元素之后的所有兄弟元素F,用~符号表示。(只能向下选择)

例:

html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .continer~p{
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是通用兄弟选择器</p><!--/*通用兄弟选择器只能向下选择*/-->
    <div class="continer"></div>
            <p>我是通用兄弟选择器</p>
            <p>我是通用兄弟选择器</p>
            <div>
                <p>我是相邻兄弟选择器</p><!--/*该p标签不是continer的兄弟元素所以其没有发生改变*/-->
            </div>
</body>
相关推荐
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
拜无忧5 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊10 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥11 小时前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼12 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙1 天前
[译] Composition in CSS
前端·css
天天扭码1 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css