如何根据元素的位置关系来调整 CSS 样式

1. 基础知识

什么是兄弟选择器

CSS 兄弟选择器是一种特殊的选择器，它用于选择一个元素的兄弟元素。

在 CSS 中，我们主要使用两种兄弟选择器：相邻兄弟选择器（+）和通用兄弟选择器（~）。

相邻兄弟选择器选取紧接在另一元素后的元素，而通用兄弟选择器则可以选取所有同级的后续兄弟元素。

为何要使用兄弟选择器

使用兄弟选择器可以帮助我们更加灵活地控制元素间的样式关系，尤其是当我们想要根据元素的位置关系来调整样式时。

它可以帮助我们避免添加额外的类或 ID，使得 HTML 结构更加简洁，CSS 样式更加易于维护。

如何使用兄弟选择器

相邻兄弟选择器用法如下：


h2 + p {
  color: red;
}

这段代码表示选择紧跟在 h2 元素后的第一个 p 元素，并将其字体颜色设置为红色。

通用兄弟选择器用法如下：


h2 ~ p {
  color: green;
}

这段代码表示选择所有跟在 h2 元素后的 p 元素，并将它们的字体颜色设置为绿色。

适用场景

兄弟选择器非常适合用在表单布局、列表布局以及任何需要根据内容顺序来调整样式的场景。

比如，你可能希望表单中所有紧跟在输入框后的错误消息都显示为红色

2. 示例演示


html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器示例title>
    <style>
        /* 使用相邻兄弟选择器改变紧跟在 h2 后的第一个 p 元素的颜色 */
        h2+p {
            color: red;
        }
 
        /* 使用通用兄弟选择器改变所有跟在 h2 后的 p 元素的背景色 */
        h2~p {
            background-color: lightgrey;
        }
     style>
head>
<body>
    <h2>标题h2>
    <p>这段文字会变成红色，背景会变成灰色，因为它既是 h2 的直接相邻兄弟，也是 h2 的通用兄弟。p>
    <p>这段文字背景会变成灰色，因为它是 h2 的通用兄弟。p>
    <p>这段文字背景也会变成灰色，同样是 h2 的通用兄弟。p>
body>
html>

在这个示例中，第一个 p 元素紧跟在 h2 后，它的文本颜色会变为红色。而所有跟在 h2 后的 p 元素，它们的背景颜色都会变为浅灰色。

相关阅读:
[Python]Word2Vec预测，如果我的‘生命‘中减去‘爱‘会剩下什么
Spring IOC源码：invokeBeanFactoryPostProcessors 后置处理器详解
.360、.halo勒索病毒数据怎么处理|数据解密恢复
Vue3项目关于轮播图的封装应该怎么封装才是最简单的呢
Springboot毕设项目班级综合信息管理系统1ro30（java+VUE+Mybatis+Maven+Mysql）
【故障公告】攻击式巨量并发请求再次来袭，引发博客站点故障
Kylin (四) --------- Kylin 4.0 查询引擎
【spring cloud】(五)配置中心——springcloud Config
【LeetCode-中等题】904. 水果成篮
Swagger：在线接口文档

原文地址：https://blog.csdn.net/qq_30094821/article/details/137948338