Question

我在ul＃nav li：hover a和第一个ul＃nav li.current a之间实现属性时有点困惑。那里应该有逗号吗？

ul#nav li.current a, ul#nav li:hover a {
     background: #CCC;

   }

Answer 1

您展示的CSS选择器执行以下操作：当a位于当前正在悬停的#CCC或a时，将<ul id="nav"><li>的背景颜色设置为<ul id="nav"><li class="current">。

<ul id="nav">
    <li class="current">
        <a href="#">This link will have it's background color set</a>
    </li>
    <li>
        <a href="#">This link will have it's background color set when hovered over the parent &lt;li&gt;</a>
    </li>
</ul>

逗号表示您希望它应用于两个匹配项，并且它不是一个连续匹配项。如果删除逗号，则设置为背景颜色的a应具有以下结构：<ul id="nav"><li class="current"><a href="#"><ul id="nav"><li>

<ul id="nav">
    <li class="current">
        <a href="#">
            <ul id="nav">
                <li>
                    <a href="#">This link will have it's background color set when hovered over the parent &lt;li&gt;</a> 
                </li>
            </ul>
        </a>
    </li>
</ul>

我不会真正称之为正确的HTML结构，但它可能在某些（或所有）浏览器中运行。无论哪种方式，逗号只允许您拥有多个选择器，这些选择器将分配相同的属性。删除逗号会使它成为一个与我给出的最后一个示例相匹配的选择器。

Answer 2

是的！如果你想让当前的li元素（激活的）在悬停时与其他元素具有相同的颜色。

＆＃13;

ul#nav li.current a, ul#nav li:hover a {
 background: #CCC;
}

＆＃13;

<ul id=nav>
  <li class=current><a>Home</a></li>
  <li><a>Work</a></li>
  <li><a>Contact</a></li>
  <li><a>Infos</a></li>
</ul>

＆＃13;

没有！如果你想让它有不同的颜色

＆＃13;

ul#nav li:hover a {
  background: #CCC;

}

ul#nav li.current a{
  background: red;

}

＆＃13;

<ul id=nav>
  <li class=current><a>Home</a></li>
  <li><a>Work</a></li>
  <li><a>Contact</a></li>
  <li><a>Infos</a></li>
</ul>

＆＃13;

什么时候应用这些CSS属性：ul＃nav li.current a，ul＃nav li：hover a？

2 个答案: