需要进一步澄清CSS语法

Question

在CSS块中：

a

这是否意味着：

＆＃34;悬停效果适用于navbar-custom子类nav列表元素中的{{1}}标记？＆＃34;

如果不是，请澄清。

Answer 1

.navbar-custom .nav li a ...是元素选择器。此选择器将样式应用于按顺序列出的其他元素中的锚标记。

例如

<div class="navbar-custom">
  <ul class="nav">
    <li>
      <a href="">link somewhere</a>
    </li>
    <li>
      <a href="">link somewhere</a>
    </li>
    <li>
      <a href="">link somewhere</a>
    </li>
  </ul>
</div>

Answer 2

是的，你正确地解释它。选择器之间的空格意味着该样式将应用于匹配的父选择器的任何后代。因此，对于.navbar-custom .nav li a:hover，作为nav类中作为navbar-custom类中元素后代的元素的后代的列表项的后代的任何锚元素将具有应用于该特定样式的特定样式。徘徊。

如果您使用括号而不是空格（即.navbar-custom > .nav > li > a:hover，那么该样式将仅适用于每个选择器的直接后代，而不是任何后代。