如何使用懸停css僞只適用於頂級元素？

如果我是有以下HTML：如何使用懸停css僞只適用於頂級元素？

<div> 
    <div> 
    <div> 
     <div> 
     "I want to access this div and change the background colour on a hover" 
     </div> 
    </div> 
    </div> 
</div>

如何訪問頂級div來應用樣式給它，而不會影響父母的div？

NB - 它對於其中div的是動態生成的一個一般系統，因此添加類或ID不是這個特定問題的解決方案。

來源

2012-01-29 Jai

如果div是動態生成的，你不能只動態生成一個類或ID的頂級？ – Bojangles 2012-01-29 18:17:47

不是真的，因爲會有一些同胞的兄弟姐妹，所以我真的很想找一些類型的psudo選擇器，將得到頂級divs沒有使用類或ID – Jai 2012-01-29 18:25:42

你可以做到這一點，如果你所有的頂部級別的div在一個容器中。 **爲什麼你不能給他們一個類，不管他們產生了什麼？** – Bojangles 2012-01-29 18:34:16

答案是你的運氣了。

沒有「不包含子元素，僅包含文本的元素」的CSS3選擇器。

來源

2012-01-29 19:01:43

我必須同意，沒有有效的解決方案只使用CSS和HTML。代碼重寫在這裏，我來... – Jai 2012-02-08 18:55:26

我認爲在未來時，CSS選擇器級別4是多一點支持，這樣的事情可能會工作：'：懸停：不（：（（*））'（「如果我被徘徊，我沒有任何子元素「）。 – towerofnix 2016-12-13 17:16:55

如果DIV是直接在<body>只是在做，這是好的：

div { 
    /* Styles */ 
}

如果不是的話，給它一個ID（如果只有這些這樣的div之一）或一類，如果有多個：

<div id="foo"> 
    <div> 
    <div> 
     <div> 
     "I want to access this div and change the background colour on a hover" 
     </div> 
    </div> 
    </div> 
</div>

然後選擇它喜歡：

div#foo { 
    /* Styles */ 
}

ÿ你沒有給出OP的任何背景，所以這是一個通用的解決方案。

來源

2012-01-29 17:13:19 Bojangles

它是一個非常通用的系統，其中divs是動態生成的，因此不知道會有多少個div。我只需要訪問位於頂部的div而不影響其父母。div {styles}將訪問所有的div – Jai 2012-01-29 17:17:17

要改變第四div的背景顏色，將鼠標懸停在第一個DIV時：

div:hover div div div { 
    background-color: #some_color; 
}

來源

2012-01-29 17:18:12 Chakrit

對不起，稍微修改了一下這個問題就更具體了，不一定會有4個div – Jai 2012-01-29 17:19:59

啊現在我看到我誤解了你最初的問題。如果可以將ID或類添加到最後一個div，則可以使用@JamWaffles解決方案，通過ID爲＃foo或類「.foo」訪問div。 – Chakrit 2012-01-29 17:35:09

我想到的是撤銷你所做的第一個div到生成的最後一個div。這裏是一個的jsfiddle的事情，你可以玩的：http://jsfiddle.net/ns6PS/ HTML：

<div> <div> <div> <div> 
    "I want to access this div and change the background colour on a hover" 
</div> </div> </div> </div> 
css: 
div { background-color: #ddd; } 
div div div div { background-color: #fff; }

糾正我，如果我錯了。

來源

2012-01-29 19:09:14 mkuk

正如在另一個答案的評論中提到的，可能不一定有四個'div'元素，可能會有更多或更少。 – BoltClock 2012-01-29 19:11:20

你總是可以使用JavaScript來獲得所有的div。 – mkuk 2012-01-29 19:13:57

如何.../div：第一個孩子{...一些驚人的CSS ...} div：第一個孩子{ background：#ddd; } div：最後一個孩子background：#fff; } – mkuk 2012-01-29 19:15:30

$('div').on('mouseover.mainfunction', function() { 
    return false; 
});

將導致事件僅在最上面的DIV 拍出如此...格：懸停將僅適用於該分區。

這是jQuery版本。

來源

2014-01-20 17:40:54 Gastonius

如何使用懸停css僞只適用於頂級元素？

回答

相關問題