如何使用悬停css伪代码仅应用于顶级元素？

如果我有以下HTML：

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

“我想访问此div并更改悬停时的背景颜色”

如何访问顶级div以对其应用样式而不影响父div

---

NB-它适用于动态生成div的一般系统，因此添加类或id不是解决此特定问题的方法。

如果div直接位于

内部，只需这样做即可：

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>

---

您的OP中没有给出任何上下文，因此这是一个通用的解决方案。

要更改第四个分区的背景颜色，请将鼠标悬停在第一个分区上：

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

---

答案是你运气不好

---

对于“不包含子元素的元素，只包含文本”没有CSS3选择器。

我想到的是从生成的第一个div到最后一个div撤消您要执行的所有操作。下面是一个可以使用的JSFIDLE工具： HTML:

“我想访问此div并更改悬停时的背景颜色”
css:
div{背景色：#ddd；}
div div div{背景色：#fff；}

如果我错了，请纠正我

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

将导致事件仅在最上面的div上拍摄 所以div：悬停将仅应用于该div

---

这是jQuery版本。

它适用于动态生成div的非常通用的系统，因此不知道会有多少div。我只需要访问位于顶部的div，而不影响它的家长。div{styles}将访问所有divssory，稍微修改了问题以使其更具体，现在不一定有4个divsah，我发现我误解了您最初的问题。如果可以将ID或类添加到最后一个div，则可以使用@JamWaffles解决方案，通过ID

#foo

或class

.foo

访问div。如果div是动态生成的，你不能用一个类或ID动态地生成顶级div吗？不太可能，因为div也会有很多同级，所以我真的在寻找一些排序psudo选择器，它可以在不使用类或ID的情况下获取顶级div。如果你所有的顶级div都在一个容器中，你可以这样做。为什么不能在生成div的任何地方给它们一个类呢？“这是一个动态生成div的通用系统，因此添加一个类或id并不能解决这个特殊问题”-为什么会是这样？如果你不能控制html的生成，那是一回事，但是如果你这样做了，那么你会使一个非常简单的问题变得更加困难。正如在对另一个答案的评论中提到的，可能不一定有四个

div

元素，可能有更多或更少。您可以始终使用javascript获取所有div。如何…/div:first child{…一些令人惊讶的css…}div:first child{background:#ddd；}div:last child{background:#fff；}选择示例中所有的

div

s，因为它们都是第一个孩子。叹气。所有的

div

s都是第一个和最后一个孩子，所以你的小提琴也不能像你想的那样。我必须同意，仅仅使用css和html是没有有效的解决方案的。代码重写我来了…我想将来当CSS选择器级别4更受支持时，类似这样的东西可能会起作用：：hover:not（：has（*）（“如果我被悬停并且没有任何子元素”）。

<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; }

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