李：翱翔初学者的话

Question

我在li元素中有div：

<ul id="tabs">   
    <li id="tab-1"> <div id="xxx"></div> </li>
    ....
</ul>

如果在CSS中我将悬停效果应用于li元素

#tabs li:hover {....}

正如预期的那样，效果应用于li和子div，

但是如果我在li和冒号之间留一个空格

#tabs li :hover {....}

效果仅适用于子div

这是正常的吗？我是一个脚本初学者，通过阅读不同的教程，我得到的印象是，在执行脚本时，空白区域没有区别。我在Chrome，Safari和Firefox中对此进行了测试

Answer 1

#tabs li :hover {....} = #tabs li *:hover {....}（* =通用选择器）。

空格分隔子选择器。当您连接多个选择器时，这是有意义的：

说，您想要选择<div class="foo">，而不是<a class="foo">或<div>。正确的选择器为div.foo（元素<div>，类foo）。

如果您在点之前添加空格，您将选择一个类foo的元素，该元素是<div>的子元素。

回到你的情况。

<div id="tabs">   #tabs                 #tabs
    <li>          li:hover              li
        <div>     div                   *:hover
                = #tabs li:hover div  = #tabs li *:hover

Answer 2

这是正常行为。 CSS中的空格是分隔符。在这种情况下，您选择li后代。