兄弟元素选择器

最新推荐文章于 2023-04-06 11:22:31 发布

buzul

最新推荐文章于 2023-04-06 11:22:31 发布

阅读量827

点赞数

分类专栏：技术文章标签： css html

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

559 篇文章 16 订阅

订阅专栏

兄弟元素选择器

语法1：前一个元素 + 后一个元素
作用：选中一个元素后紧挨着的指定的兄弟元素。
语法2：前一个元素 ~ 后边一类元素
作用：选中后边的所有兄弟元素

举例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 为span后的p标签设置背景颜色 */
        span + p {
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>我是一个段落</p>
    <span>我是span标签</span>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

结果：
为紧挨着span的p设置了背景颜色。

举例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 为span后的p标签设置背景颜色 */
        span + p {
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>我是一个段落</p>
    <span>我是span标签</span>
    <div>我是div</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

结果：样式未起作用。
注意前一个元素和后一个元素必须紧挨着。否则会不起作用。

举例3：
使用~，为span后的所有p标签设置背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 为span后的所有p标签设置背景颜色 */
        span ~ p {
            background-color: orange;
        }
    </style>
</head>
<body>
    <p>我是一个段落</p>
    <span>我是span标签</span>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <div>
        <p>我是div中的段落</p>
    </div>
    <p>我是一个段落</p>
</body>
</html>

结果：可以实现span后的所有p兄弟元素设置样式，即使span后的p不连续。

buzul

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兄弟元素选择器

兄弟元素选择器语法1：前一个元素 + 后一个元素作用：选中一个元素后紧挨着的指定的兄弟元素。语法2：前一个元素 ~ 后边一类元素作用：选中后边的所有兄弟元素举例1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&...
复制链接

扫一扫