選擇奇怪的嵌套元素

我似乎無法找到類似的情況，我可以找出解決方案。在不更改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> 
 
\t \t words 
 
\t </pre> 
 
    <br> 
 
    <a href="#h.c2v2rn37qt4d">Top of Page</a> 
 
    <br> 
 
    </span> 
 
    </p> 
 
</div>

來源

2017-06-29 tsubi-rin

類似'.INFO了'和'.INFO pre'？你必須要做的不僅僅是這個嗎？像限制和東西？編輯問題，並把這些約束在 – Huangism

@黃色我不知道你的意思是什麼限制。我真的只想知道我應該怎麼做才能選擇元素。如果我可以讓他們選擇，我可以完成我的任務的其餘部分。我的主要問題是.info a選擇頂部的標籤以及跨度內的標籤。 –

@karthick我不明白這個符號。 –

由於p元素只能包含phrasing content，在這種情況下，它包含flow content，瀏覽器被關閉元素和無效的選擇。

簡而言之，pre元素是流內容並且不能包含在p元素中。因此，瀏覽器正在覆蓋您的HTML結構以保持有效的標記。這裏是什麼樣子：

的瀏覽器已經基本上轉變你的p後裔到p兄弟姐妹。

你需要重構你的選擇器的HTML工作。

如果你不能改變的HTML，a sibling selector will work.

來源

2017-06-29 17:28:54

這是唯一的方法嗎？該html是由一個程序生成的，我無法更改，因此編輯該html非常困難。 –

@ tsubi-rin找出這個東西有多少地方用於生成html，看看你是否可以將'p'改成'div'，但選擇它們很簡單'.info h1 a'給你錨點標題和'.info .c6 a'會在您更改html後爲您提供另一個。你實際上可以做'.info a'和'.info h1 a'，更具體的選擇器將覆蓋更通用的選擇器 – Huangism

選擇奇怪的嵌套元素

回答

相關問題