如何只对一个可支持的元素采取行动？

Question

我正在构建一个包含多个子列表的列表。当我将鼠标悬停在<li>元素上时，我想改变<li>的样式，而不是其父母的样式。

你可以check the code and demo here。如果您将鼠标悬停在1.1上，我只希望1.1为红色。如果我将鼠标悬停在1.3.1上，我只希望1.3.1为红色。

我需要在CSS上进行哪些更改才能完成此任务？

谢谢！

Answer 1

在这种情况下，为什么你不使用＆＃34;：hover＆＃34;与＆＃34; a＆＃34;元件？

   li {
      display: block;
      width: 100px;
      background-color: #dedede;
    }

    ul > li > a:hover {
       color: red;
       display: block;
    }

Answer 2

HTML

<li id=list11><a>1.1</a></li>

CSS

#list11{
//apply formatting here
}