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

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 元素（已激活）在悬停时与其他元素具有相同的颜色。

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

<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>

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

ul#nav li:hover a {
  background: #CCC;

}

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

}

<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>

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

When would these CSS properties be applied: ul#nav li.current a, ul#nav li:hover a?

html

css

css-selectors