选择奇怪的嵌套元素

Question

我似乎找不到足够类似的情况来找出解决方案。 在不改变HTML和添加class和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元素只能包含短语内容 ，在这种情况下，它包含流内容 ，因此浏览器正在关闭该元素并使选择器无效。

简而言之， pre元素是流内容 ，不能包含在p元素内。 因此，浏览器将覆盖您的HTML结构以维护有效的标记。 看起来是这样的：

浏览器实质上已将您的p后代转换为p同级。

您需要重组HTML才能使选择器正常工作。

如果您无法更改HTML，则同级选择器将起作用。