简介

element+element 选择器用于匹配紧接在第一个元素之后、且与第一个元素同级的第二个元素。它使用加号 (+) 分隔两个元素名称。

语法

element1 + element2 {
  /* 样式规则 */
}

其中：

• element1：第一个元素的名称
• element2：紧接在 element1 之后的第二个元素的名称

用法

element+element 选择器可用于：

• 为紧接在特定元素之后的元素应用样式
• 创建元素之间的视觉关联
• 导航文档结构

示例

示例 1：为紧接在 <h1> 标签之后的 <h2> 标签设置蓝色文本颜色

h1 + h2 {
  color: blue;
}

示例 2：为紧接在 li 元素之后的 a 元素添加下划线

li + a {
  text-decoration: underline;
}

示例 3：为紧接在 p 元素之后的任何元素设置边框

p + * {
  border: 1px solid black;
}

与相邻选择器的比较

element+element 选择器与相邻选择器（~）类似，但后者匹配所有紧接在第一个元素之后、且与第一个元素同级的元素，而 element+element 选择器仅匹配紧接在第一个元素之后的一个元素。

浏览器支持

element+element 选择器在所有现代浏览器中都得到支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。

注意事项

• element+element 选择器只能匹配直接相邻的元素。如果两个元素之间有其他元素，则选择器将不匹配。
• element+element 选择器对嵌套元素不起作用。例如，以下选择器将不匹配紧接在嵌套 div 元素之后的 p 元素：

div > div + p {
  /* 样式规则 */
}

替代方案

如果需要匹配紧接在特定元素之后的所有元素，可以使用相邻选择器（~）或 :nth-child() 伪类。

示例：使用相邻选择器

h1 ~ h2 {
  color: blue;
}

示例：使用 :nth-child() 伪类

h1:nth-child(n+2) {
  color: blue;
}