使用后代选择器时，CSS 兄弟选择器会中断吗？

Question

我的最后一个问题被关闭为两个完全不相关的问题的“重复”，并且说明说要发布一个新问题。 看起来有点乱，但还好； 这里又是一个问题（为了清楚起见，我更改了标题）：

================================================

我试图定位一个只出现在图像之后的链接，但它们位于单独的标签中，如下所示：

<p>
  <a href=whatever>
    <img stuff>
  </a>
</p>
<p>
  <a href=something>This should be a different color</a>

这个“作品”：

p + p>a {
  color: red;
}

但这有点不具体。 我想做这样的事情，但我认为它在寻找 IMAGE 的兄弟姐妹而不是 PARAGRAPH 当我这样做时：

p>a>img + p>a {
  color:red
}

所以第一个例子有效，但可能会触发我不想要的东西。 第二个根本不起作用，也许它不能。 我很想使用类或 id，但这是在一个使用 Markdown 的项目中，它被翻译成 HTML。 我必须定位元素的唯一方法是通过一般结构而不是属性（除非您知道另一种方法？）

Answer 1

了解浏览器从左到右匹配选择器可能会有所帮助，有时自己以这种方式阅读可能会有所帮助。 另外，请记住，您的间距意味着 CSS 不关心的分组。

因此，如果我们从右到左阅读它，我们会发现这个p + p>a将被理解为“一个段落内的锚点，而该段落本身紧挨着另一个段落”。

另一方面， p>a>img + p>a将被解读为“段落内的锚点，它本身就在段落内锚点内的图像旁边”。 通过在选择器和>之间留出空格，您暗示了一个不存在的分组。 所以这实际上会像这样匹配：

<p>
  <a>
    <img/>
    <p>
      <a>THIS HERE IS WHAT IS TARGETED</a>
    </p>
  </a>
</p>

显然这种结构是荒谬的，但你明白我希望定位的工作方式。 有没有办法来遍历备份到父（有没有<选择），也无法将组选择像(p>a>img) + (p>a)所以很遗憾你想在这里选择的做法是行不通的/可能的。