css选择器第n个孩子 - 以第一个（n）孩子为目标 [英] css selectors nth-child - to target first (n) children

问题描述

我一直试图仅使用使用CSS选择器中的前四个列表项nth-child和/或nth-last-child

 < UL> 
< li> Hello hello项目< / li> 
< li> Hello item 2< li> 
< li> Hello item 3< / li> 
< li> Hello item 4< / li> 
< li> Hello item 5< / li> 
< li> Hello item 6< / li> 
< li> Hello item 7< / li> 
< li> Hello item 8< / li> 
< li> Hello item 9< / li> 
< / ul> 
  

我的第一次尝试：

  ul li：nth-​​child（1n）：not（：nth-​​last-child（-n + 5））{
 font-weight：bold; 
} 
  

然而我想简化它

所以我的第二个：

  ul li：nth-​​child（-n + 4）{
 font-weight：bold; 
} 
  

你能告诉我是否有比第二个更好的解决方案吗？正确的方法来定位第一（n）个孩子？

解决方案

b
$ b

jsFiddle示例

虽然更好的解决方案可能是：

  ul li：nth-​​child -n + 4）{
 font-weight：bold; 
} 
  

jsFiddle示例

I have been trying to target only the first four list items in the using css selector nth-child and/or nth-last-child

<ul>
    <li>Hello first item</li>
    <li>Hello item 2<li>
    <li>Hello item 3</li>
    <li>Hello   item 4</li>
    <li>Hello  item 5</li>
    <li>Hello   item 6</li>
    <li>Hello   item 7</li>
    <li>Hello  item 8</li>
    <li>Hello  item 9</li>
</ul>

my first try:

ul li:nth-child(1n):not(:nth-last-child(-n+5)){
    font-weight:bold;
}

Yet i wanted to simplify it

so my second one:

ul li:nth-child(-n+4){
    font-weight:bold;
}

Can you tell me if there is any better solution than second one / is this the right way to target first (n) children ?

解决方案

Your code works if you fix the typo:

jsFiddle example

Although a better solution may be:

 ul li:nth-child(-n+4) {
     font-weight:bold;
 }

jsFiddle example

这篇关于css选择器第n个孩子 - 以第一个（n）孩子为目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！