選擇奇怪的嵌套元素

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，則同級選擇器將起作用。