简介
element+element 选择器用于匹配紧接在第一个元素之后、且与第一个元素同级的第二个元素。它使用加号 (+) 分隔两个元素名称。
语法
-------- - -------- - -- ---- -- -
其中：
element1：第一个元素的名称element2：紧接在element1之后的第二个元素的名称
用法
element+element 选择器可用于：
- 为紧接在特定元素之后的元素应用样式
- 创建元素之间的视觉关联
- 导航文档结构
示例
示例 1：为紧接在 <h1> 标签之后的 <h2> 标签设置蓝色文本颜色
-- - -- - ------ ----- -
示例 2：为紧接在 li 元素之后的 a 元素添加下划线
-- - - - ---------------- ---------- -
示例 3：为紧接在 p 元素之后的任何元素设置边框
- - - - ------- --- ----- ------ -
与相邻选择器的比较
element+element 选择器与相邻选择器（~）类似，但后者匹配所有紧接在第一个元素之后、且与第一个元素同级的元素，而 element+element 选择器仅匹配紧接在第一个元素之后的一个元素。
浏览器支持
element+element 选择器在所有现代浏览器中都得到支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
注意事项
- element+element 选择器只能匹配直接相邻的元素。如果两个元素之间有其他元素，则选择器将不匹配。
- element+element 选择器对嵌套元素不起作用。例如，以下选择器将不匹配紧接在嵌套
div元素之后的p元素：
--- - --- - - - -- ---- -- -
替代方案
如果需要匹配紧接在特定元素之后的所有元素，可以使用相邻选择器（~）或 :nth-child() 伪类。
示例：使用相邻选择器
-- - -- - ------ ----- -
示例：使用 :nth-child() 伪类
----------------- - ------ ----- -