选择奇怪的嵌套元素

Question

我似乎找不到类似的情况，我可以找出解决方案。在不更改html并添加类和ID的情况下，如何从以下代码中选择a标记和pre标记？我已经把我的尝试包括在内了。

div.info p.c6 span a {
  background-color: red;
}

p.c6 span pre {
  background-color: blue;
}

<div class="info">
  <h1 class="c4">
    <a name="h.6q469n2havqi"></a><span>Title</span>
  </h1>
  <p class="c6">
    <span>
     <pre>
		   words
	 </pre>
     <br>
     <a href="#h.c2v2rn37qt4d">Top of Page</a>
     <br>
    </span>
  </p>
</div>

Answer 1

由于p元素只能包含phrasing content，并且在这种情况下它包含flow content，因此浏览器会关闭该元素并使您的选择器无效。

简而言之，pre元素是流内容，不能包含在p元素中。因此，浏览器会覆盖您的HTML结构以保持有效标记。这是它的样子：

浏览器基本上已将p个后代转换为p个兄弟姐妹。

您需要重新构建HTML以供选择器工作。

如果您无法更改HTML，a sibling selector will work.