兄弟选择器和相邻兄弟选择器

最新推荐文章于 2026-06-01 09:48:49 发布

原创最新推荐文章于 2026-06-01 09:48:49 发布 · 1w 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web

本文介绍了CSS3中两种重要的选择器：兄弟选择器和相邻兄弟选择器。兄弟选择器用于选择具有相同父元素的兄弟元素，而相邻兄弟选择器则专门针对紧跟在另一个特定元素之后的元素进行样式设置。

1.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>兄弟选择器</title>
    <style type="text/css">
        h1~p{
            color:red;
        }
    </style>
</head>

<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果如下图所示：

2.相邻兄弟选择器（Adjacent sibling Selector）可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>

<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果如下图所示：