加号选择器似乎针对所有兄弟姐妹，而不仅仅是它的直接兄弟姐妹

Question

简化版本：我试图定位两个跨度中的第二个，只要它们紧邻。 据我了解，一个简单的跨度+跨度应该可以完成这项工作。 但是，给定以下 HTML：

<p>
blah 
<span>1 blah</span>
<span>2 TARGET ME!!!!</span>
blah 
<span>3 SHOULD NOT BE TARGETED (but is)</span>
<span>4 TARGET ME!!!!</span> 
blah 
<span>5 SHOULD NOT BE TARGETED (but is)</span>
</p>

还有这个 css：

span + span {
  background-color:orange;
}

该段落中有 5 个跨度。 4 个跨度以橙色背景呈现，但我对使用“加号”选择器的解释告诉我，这些跨度中只有 2 个应该是橙色的（跨度 2 和 4）。 我错过了什么，还是我需要想出另一种方法？ 在这里更新了 Codepen

实际用例是这样的：用户生成的内容页面，其中可以随机标记单词（将带有“标记”的 class 的跨度添加到每个标记的单词中）。 每段内容都不一样。 我只想在这些标记的单词/跨度中的两个彼此相邻且中间没有其他未标记的单词时应用样式。 这样我就可以在两个标记词之间添加更多空间。 然而，实际发生的情况是，段落中第一个之外的任何标记词都会应用 styles，而不管它与其他标签的接近程度如何。

Answer 1

认为我可能已经弄清楚了，至少对于我的用例（确保两个标记词之间有空格，但是当标记词之前已经存在空格时，不会添加额外的空格。https://codepen.io/spicedham /笔/XWjNmLL

span::before {
    display: inline;
    content: " ";
   }

它归结为浏览器如何处理空白。 从https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace中，您了解到“紧跟在另一个空格后面的任何空格（甚至跨两个单独的内联元素）都会被忽略。”

此外，我还被提醒，段落中的任何文本，但在另一个标签（只是纯文本）之外的任何文本都会被忽略，因此段落中的 span 被视为兄弟姐妹，即使它们之间存在纯文本。

Answer 2

element1 + element2选择器用于直接在element1之后的 select element2 （仅第一个元素）。 这就是为什么你的第一个<span>永远不会成为目标。