我相信使用CSS可以得到的最接近的结果是从悬浮元素的子元素中删除悬浮样式…这对父母没有帮助。
li:hover { background-color: lightgray;}li:hover { font-weight: bold;}li:hover ul { background-color: white; font-weight: normal;}<ul> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li></ul>对于您发现的重复项，可接受的答案是用Javascript做到这一点的最佳方式，方法是
e.stopPropagation：使用CSS级联
<li>-hover效。不过，您将要比该选择器中的“ all lis”更具体：
$('li').mouseover(function(e){ e.stopPropagation(); $(this).addClass('currentHover');});$('li').mouseout(function(){ $(this).removeClass('currentHover');});.currentHover { background-color: red;}li.currentHover ul { background-color: white;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul > <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li></ul>
