CSS的相邻兄弟选择器用法简单讲解

当我们需要选中文档中一个元素旁边的另一个元素时，就可以使用CSS的相邻兄弟选择器。相邻兄弟选择器用“+”符号表示，是紧跟在某个元素后的第一个指定元素。下面来详细讲解一下相邻兄弟选择器的用法。

语法规则：

element1 + element2

• element1: 要选择元素的前一个兄弟元素。
• +: 选择前一个兄弟元素紧随的下一个兄弟元素。
• element2: 要选择的元素。

相邻兄弟选择器中的"element1"与"+"符号之间不能有其他元素或文本节点，否则选择器将不会起作用。

示例：

示例1

下面是一个示例，当"div"与"h2"元素紧接在一起时， h2元素将会变成红色：

<div>div元素1</div>
<h2>h2元素1</h2>
<h3>h3元素1</h3>
<div>div元素2</div>
<h2>h2元素2</h2>

div + h2 {
    color: red;
}

示例2

下面是一个示例，当一个表格中单元格的前一个兄弟元素是一个checkbox元素时，选择这个单元格,如果单元格中的文本为“✔️”就会被标记成黑色：

<table>
    <tr>
      <td><input type="checkbox"></td>
      <td>✔️</td>
      <td>cell1-3</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>cell2-2</td>
      <td>cell2-3</td>
    </tr>
</table>

input[type="checkbox"] + td:contains("✔️") {
    color: black;
}

在上述示例中，我们使用相邻兄弟选择器选中了checkbox后面紧跟的单元格"td"元素，然后使用:contains()伪类选中单元格中包含文本"✔️"的元素，将其文本颜色设置为黑色。

总结一下：相邻兄弟选择器可以帮助我们选中某个元素相邻兄弟元素中的特定一个元素。该选择器的语法规则及示例都已在以上讲解过程中详细说明。