CSS :first-child selector

Question

为什么两个链接都用这个设置加粗？

我希望只有 li.current 正下方的 a-tag 变粗。

CSS

.ul li.current a:first-child{
    font-weight:bold;
}

HTML

<ul>
  <li class="current">
    <a href="">This link</a>
      <ul>
        <li>
          <a href="">Not this</a>
        </li>
      </ul>
  </li>
</ul>

Answer 1

使用:

ul li.current > a:first-child{
    font-weight:bold;
}

jsFiddle example

> 指的是直接子代。因此，当您的规则应用于任何作为 child 的 anchor 时，上述规则仅适用于 ul li.current 的直接 child 。请注意，您也可以删除 :first-child 部分，具体取决于您希望如何格式化链接。

另请注意，在您的代码中有 .ul，您可能只是想要 ul，就像在我的示例中一样。