如果列表项包含列表，则在列表项上覆盖hover伪类

Question

我喜欢悬停效果以突出显示无序列表中的行。但是当我有子列表时，结果有点多了。将突出显示整个子列表周围的父行以及所选子列表项。

如果列表项立即包含无序列表，是否有办法使用CSS覆盖父列表项的悬停效果？

小提琴：http://jsfiddle.net/LgCTm/

HTML;

<ul>
    <li>Row 1</li>
    <li>Row 2</li>
    <li>
        <ul>
            <li>Row 3 Col 1</li>
            <li>Row 3 Col 2</li>
        </ul>
    </li>
</ul>

CSS;

ul { padding: 5px 3px;
    margin: 3px 0; }
li { padding: 3px 2px; background-color: #DDD; }
li:hover { background-color: #0F0; }

Answer 1

这是2年前的重复答案，这是最好的answer回复：

According to Wikipedia：

  

选择器无法提升

     

    

CSS无法选择满足特定条件的元素的父元素或祖先元素。更高级的选择器方案（例如XPath）将启用更复杂的样式表。但是，CSS工作组拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关。

  

对于将来搜索SO的任何人来说，这也可能被称为祖先选择器。

Answer 2

这个怎么样：http://jsfiddle.net/LgCTm/1/

它并不完美，但可能是“足够好的解决方法”的基础。