如何在ul元素中单独悬停子节点？

Question

HTMLul元素将子元素悬停在父元素上

ul li:hover {
  background-color: pink;
}

<ul>
  <li>1
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

小提琴

Answer 1

我了解您正在努力实现这一目标：

• 当让孩子们li盘旋时，父母仍然保持孩子们相同的风格。

这是一个片段

li {
  /* demo */
  list-style: none;
}
li:hover {
  color: red;
  font-weight: 700
}
li:hover li {
  color: none;
  font-weight: 400
}
li:hover li:hover {
  color: red;
  font-weight: 700
}

<ul>
  <li>1 - text
    <ul>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1 - text</li>
    </ul>
  </li>
  <li>1 - text</li>
  <li>1 - text</li>
  <li>1 - text</li>
  <li>1 - text</li>
</ul>