Question

如果我要使用以下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？

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

Answer 1

答案是你运气不好。

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

Answer 2

如果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中没有给出任何上下文，因此这是一般解决方案。

Answer 3

当鼠标悬停在第一个div上时，要更改第4个div的背景颜色：

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

Answer 4

我想出的是撤消你要做的第一个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; }

如果我错了，请纠正我。

Answer 5

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

会导致事件仅在最顶层的div上拍摄所以... div：hover只适用于那个div。

这是jQuery版本。

如何使用悬停css伪仅适用于顶级元素？

5 个答案: