CSS 加号

1. 前言

在网页开发中，我们经常需要对元素进行布局和样式的调整。CSS（层叠样式表）作为一种常用的样式描述语言，具有丰富的选择器和属性，通过简单的语法可以实现各种炫酷的效果。

本文将重点介绍 CSS 中的加号（+）选择器，并结合示例代码详细讲解其使用方法和应用场景。

2. 加号选择器的基本用法

加号选择器是 CSS 中的一种选择器，用于选择指定元素后面紧邻的相邻兄弟元素。它的语法格式为：

元素1 + 元素2 {
  样式属性: 值;
}

其中，元素1和元素2分别表示两个相邻的元素，可以是具体的标签名、类选择器、ID选择器等。

使用加号选择器可以选择元素1之后的第一个相邻的元素2，并且只有相邻的元素2才会应用该样式。

下面的示例代码展示了如何利用加号选择器对相邻的元素进行样式设置：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p + div {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落。</p>
    <div>这是一个 DIV 元素。</div>
    <div>这是另一个 DIV 元素。</div>
  </body>
</html>

运行结果如下图所示：

这是一个段落。
[黄色背景]这是一个 DIV 元素。
这是另一个 DIV 元素。

可以看到，加号选择器选择了<p>元素之后的第一个相邻的<div>元素，并将其背景颜色设置为黄色。

3. 加号选择器的应用场景

3.1 相邻兄弟元素的布局

加号选择器常用于对相邻兄弟元素的布局进行调整。通过对第一个元素的样式设置，可以影响到后面的相邻元素。

例如，可以利用加号选择器实现一个简单的导航栏效果。导航栏中的链接之间通过加号选择器相邻关系进行选择，并设置样式以实现链接之间的分隔效果。

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        color: blue;
        text-decoration: none;
      }

      a + a {
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid black;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">服务</a>
    <a href="#">关于我们</a>
  </body>
</html>

运行结果如下图所示：

[首页] | [产品] | [服务] | [关于我们]

可以看到，使用加号选择器对导航栏中的链接进行样式设置，实现了链接之间的竖线分隔效果。

3.2 特定位置的样式调整

加号选择器可以用于对特定位置的元素进行样式调整。通过选择第一个元素之后的相邻元素，可以实现不同位置上元素的样式区分。

例如，可以利用加号选择器对输入框的文本标签进行样式设置，使其在输入框获得焦点时显示为粗体。

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:focus + label {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <input type="text" placeholder="请输入姓名">
    <label>姓名</label>
  </body>
</html>