Css 设置动态嵌套UL结构的样式

我有一个嵌套的UL结构，它表示一个文件夹树，它可以生长得很深。我一直在做一个简单的工作：为LI元素提供悬停效果。问题是执行li:hover不会起作用，因为它也会影响所有的父“li”。通常我会尝试将悬停效果应用于LI中的链接元素或其他内容，以避免家长也采用这种样式，但由于目前的情况，这不是一种选择。我有一个可行的解决方案，使用javascript在悬停的LI上放置一个类，然后改为对这个类进行样式化，但我真的很想看看是否有一种方法可以通过纯css实现这一点

我想可能有一种方法可以实现一个非常“硬编码”的css解决方案，但我更感兴趣的是一个动态和干净的解决方案，因为该结构可以无限嵌套

---

也许有一些我不知道的伪选择器？请注意，它不必是IE完全不清楚。。。但是，如果您想在悬停父

LI

时设置嵌套

LI

的样式，而不设置父

的样式

试试这个：

CSS
小提琴示例：
你的问题不是很清楚，而且会混淆。让我解释一下，当用户悬停在城市（印度/中国/英国）上时，样式应该通过CSS应用于州和国家

<ul>
  <li>India (Apply Style)
    <ul>
      <li>India State (Apply Style)
        <ul>
          <li>India City (On Hover)</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>China
    <ul>
      <li>China State
        <ul>
          <li>China City</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>United Kingdom
    <ul>
      <li>UK State
        <ul>
          <li>UK City</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>


印度（应用样式）

印度邦（应用样式）

印度城（悬停）




中国

中国国家

中国城市




联合王国

英国国家

英国城市





如果要使用纯CSS，则需要使用父元素、子元素和元素

对于悬停元素：

ul li:hover{
   "Style"
}

ul li ul li{
    "Style"
}

对于其他要素：

ul li:hover{
   "Style"
}

ul li ul li{
    "Style"
}

更新：我刚刚重读了你的问题，你在其中陈述：

“通常我会尝试将悬停效果应用于链接
元素之类的，避免家长把这种风格当作
嗯，但由于目前的情况，这不是一个选择。”

如果这是真的，那么下面的解决方案对于您的环境是不可行的，并且您无法用纯CSS实现您想要的。然而，我留下了我的答案，因为其他想要实现这一点但可以使用嵌套元素的人可能会发现它很有用


纯CSS仅通过添加HTML
通过纯CSS，您可能实现某些目标的唯一方法是在
li
中添加一个额外的元素（如
span
），并在该元素上执行悬停。我假设，无论悬停哪个文件夹，您都希望突出显示该文件夹。如果是，请使用此代码：

HTML

<ul>
    <li>
        <span>Folder 1</span>
        <ul>
            <li>
                <span>Folder 1.1</span>
                <ul>
                    <li>
                        <span>Folder 1.1.1</span>
                        <ul>
                            <li>
                                <span>Folder 1.1.1.1</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


现在，如果您希望子文件夹也在父文件夹的悬停位置高亮显示，则更改以下代码：

CSS

li span:hover {
    color: red;
    background-color: yellow;
}

li span:hover,
li span:hover + ul span {
    color: red;
    background-color: yellow;
}

他们的关键点是利用额外的元素来控制悬停，无论是项目本身还是悬停应该影响的任何后续元素。
CSS中没有父选择器，因此不可能您想要在悬停上设置最深嵌套的li？关于
ul-li:hover{/*…*/}
？我更喜欢
李莉：悬停
以简洁和ol vs ul不可知论。@KyleSevenoaks不一定是最深的一个，只是在深度上影响一个人，而不影响父母。不，或者，这就是问题所在。当用户将鼠标悬停在城市上时，应该受样式更改影响的只有城市LI，而不是州或国家。正如我在帖子中提到的，当嵌套ul达到10或更高时，这不是很好：/如果标记允许的话，这确实是应该实现的。我想我们必须等待某种CSS等价物“event.stopPropagation（）；”才能解决这个问题。