选择奇怪的嵌套元素

Question

I can't seem to find a situation similar enough that I can figure out a solution. Without changing the html and adding classes and ids how can I select the a tag and the pre tag from the following code? I've included my attempts.

 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

Because the p element can only contain phrasing content , and in this case it contains flow content , the browser is closing the element and invalidating your selectors.

In short, the pre element is flow content and cannot be contained inside a p element. Therefore, the browser is overriding your HTML structure to maintain valid mark-up. Here's what it looks like:

The browser has essentially converted your p descendants into p siblings.

You need to restructure your HTML for your selectors to work.

If you can't change the HTML, a sibling selector will work.