如何在 CSS 中只定位 :hovered 元素而不定位其父元素？

Question

所以我有嵌套的 div。当我将鼠标悬停在一个 div 上时，我希望该 div 和 没有其他 div 获得box-shadow。不幸的是，:hovered div 的父母也是box-shadowing，因为他们有相同的签名。我无法更改它，因为它们来自无限嵌套模板。

我想我只需要用box-shadow 定位任何:hovered 的列表项，然后定位它的父项以防止他们表达box-shadow，但我不知道如何在CSS 中表达这一点：

ul:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

<some statement..?>{
  box-shadow: none;
}

编辑： This is a JSFiddle of my thing

Answer 1

您可以通过为您的元素指定一个 id 来做到这一点：

<style type="text/css">
div[id='child']:hover{
background-color:purple;
}

</style>

<div id='parent'>

Hello<br>
<div id='child'>hi<div>

</div>

jsfiddle example

Answer 2

您没有选择正确的元素。使用：

span:hover {
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

小提琴：http://jsfiddle.net/vy3g5e64/1/

Answer 3

如果您有一个无法修改其结构的嵌套模板，您始终可以使用 css 特性来覆盖悬停时的视觉效果（添加框阴影）。

我看到你有ul:hover { box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12); }

而且你想避免它被应用到所有的 li 上，对吧？

你应该应用到每个单独的li而不是ul，如果你需要覆盖一些属性而不能修改结构，在html中添加id或类，你可以使用特异性来覆盖一些属性。

例如，如果你想覆盖

 ul:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

您可以更具体一些，并在选择器中添加父元素，例如：

div ul:hover{
   box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

在此处查看特异性的工作原理。 Prioritize id selector over an id and class

编辑

注意到添加的jsfiddle后：

只需选择 li 元素，但是：

ul li:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

您的 jsfiddle 中的 div 后面有一个跨度。 然后，您可以简单地定位跨度并为其添加显示块和 100% 宽度，以提供类似于应用于 li 的框阴影：

ul li span:hover{
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.12);
}

span{ display:block; width:100%; }

如果您需要定位父元素，则当前 CSS3 规范没有可用的选择器。您可以使用这个 CssParentSelector jQuery 插件作为解决方法，并能够在 CSS 中选择父元素：https://github.com/Idered/cssParentSelector