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

    1. 基础知识

    什么是兄弟选择器

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

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

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

    为何要使用兄弟选择器

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

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

    如何使用兄弟选择器

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

    1. h2 + p {
    2.   color: red;
    3. }

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

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

    1. h2 ~ p {
    2.   color: green;
    3. }

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

    适用场景

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

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

    2. 示例演示

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>兄弟选择器示例title>
    6.     <style>
    7.         /* 使用相邻兄弟选择器改变紧跟在 h2 后的第一个 p 元素的颜色 */
    8.         h2+p {
    9.             color: red;
    10.         }
    11.  
    12.         /* 使用通用兄弟选择器改变所有跟在 h2 后的 p 元素的背景色 */
    13.         h2~p {
    14.             background-color: lightgrey;
    15.         }
    16.      style>
    17. head>
    18. <body>
    19.     <h2>标题h2>
    20.     <p>这段文字会变成红色，背景会变成灰色，因为它既是 h2 的直接相邻兄弟，也是 h2 的通用兄弟。p>
    21.     <p>这段文字背景会变成灰色，因为它是 h2 的通用兄弟。p>
    22.     <p>这段文字背景也会变成灰色，同样是 h2 的通用兄弟。p>
    23. body>
    24. html>

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

  • 相关阅读:
    09.Tornado_获取请求参数
    Axios进阶
    什么是Rebex Total Pack for.NET?
    grpc系列2-针对k8s vip超时设置，自定义服务端和客户端镜像
    TCP补充
    java使用 TCP 的 Socket API 实现客户端服务器通信
    logback+MQ+Logstash 日志收集
    【Javascript】设计模式之单例模式
    2023年9月青少年软件编程（C 语言） 等级考试试卷（七级）
    【微服务】Gunicorn服务器替换Flask自带的WSGI Server服务器
  • 原文地址：https://blog.csdn.net/qq_30094821/article/details/137948338