html - 我如何只针对 :hovered element and none of its parents in CSS?

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