如何在CSS中選擇父項的父項？

Question

<div id="maincontent"> 
    <div id="content"> 
     <div id="admin"></div> 
    </div> 
</div> 

僅當使用CSS存在#admin時，纔有可能匹配#maincontent的規則嗎？

這只是我在控制面板中有一個背景顏色，但不希望它在那裏爲遊客。

Answer 1

無不是與CSS。或者，您可以使用CSS類母雞查看管理員。因此，對於管理員

<div id="maincontent" class="adminBackground"> 
    <div id="content"> 
     <div id="admin"></div> 
    </div> 
</div> 

而對於普通遊客（注意到類= 「adminBackground」 屬性被刪除）：

<div id="maincontent"> 
    <div id="content"> 
     <div id="admin"></div> 
    </div> 
</div> 

然後定義爲類 「adminBackground」 角色：

.adminBackground { 
    background: #AAAAAA; 
} 

Answer 2

不幸的是，CSS中沒有父選擇器。

你將不得不使用JavaScript來做到這一點在客戶端上。

Answer 3

不幸的是，你不能只使用css選擇器來定位節點的父節點。你將不得不通過使用一些JavaScript或jQuery來做到這一點。以下是如何使用javascript和jQuery實現所需內容的兩個示例。

下面是javscript如何：

if (document.getElementById("admin") != null) { // if there is a node with "admin" as ID 
    document.getElementById("maincontent").style.backgroundColor = "#000"; // changes the background to black 
} 

下面是如何在jQuery的：

if ($("#admin").size() === 1) { // if there is a node with "admin" as ID 
    $("#maincontent").css("background-color", "#000"); // changes the background to black 
} 

Answer 4

選擇父元素？那麼你可以用css4！

$#maincontent #admin { 
    background:hotpink; 
} 

哪..工程.. uhmm .. HH ...

與真棒jQuery腳本

但是，是的，先生，你可以！

cssParentSelector.js

如果你喜歡CSS這應該是在許多情況下

絕對的工具