CSS：first-child selector [英] CSS :first-child selector

问题描述

我希望只有li.current下方的a标签变粗。

CSS

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

Html

 < ul> 
< li class =current> 
< a href =>此链接< / a> 
< ul> 
< li> 
< a href =>不是此< / a> 
< / li> 
< / ul> 
< / li> 
< / ul> 
  

解决方案

使用：

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

jsFiddle示例

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

还要注意，在你的代码中，你有 .ul ，你可能只是想在 ul ，就像我的例子。

How come both links get bold with this setup?

I would like that only the a-tag just below the li.current get bold.

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>

解决方案

Use:

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

jsFiddle example

The > refers to the immediate child. So while your rule was being applied to any anchor that was a child, the above rule only applies to the immediate children of ul li.current. Note that you may also be able to drop the :first-child part depending on how you want your links formatted.

Also note that in your code you have .ul where you probably just wanted ul as is in my example.

这篇关于CSS：first-child selector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！