CSS nth-child大于和小于 [英] CSS nth-child for greater than and less than

问题描述

在我的HTML中，

 < div class =container 
< / div> 
< div class =container> 
< / div> 
< div class =container> 
< / div> 
< div class =container> 
< / div> 
 .................. 
 .................. 
  

在上面的HTML中我有 container 在我的CSS中，我需要添加一些样式到 .container：nth-​​child（3,4,5,6，...等等）。意味着我需要在1和2之外应用所有 nth-child 。

解决方案

p> ：nth-​​child（）不能在类上工作，它会查找元素本身。你需要用封装包装 .container div，并使用以下命令：

  .wrapper div：nth-​​child（n + 3）{
 / *将你的样式放在这里... * / 
} 
  





 < div class =wrapper> 
< div class =container>< / div> 
< div class =container>< / div> 
< div class =container>< / div> 
< div class =container>< / div> 
< / div> 
  

c>

h2>



使用 .container：nth-​​child（n + 3）可能无效。因为：nth-​​child（）伪类代表 nth > .container 在这种情况下）。

如果 .container =http://dev.w3.org/csswg/selectors3/#nth-child-pseudo>规格：

：nth-​​child（an + b）伪类符号表示元素
，其具有 an + b-1 siblings ，在文档树中，对于任何
正整数或零值 n 父元素。

请考虑以下示例：

 code>< div class =parent> 
< div>第1< / div> 
< div> 2nd< / div> 
< div>第3< / div> 
< div class =container>第4< / div> 
< div class =container>第5< / div> 
< div class =container>第6< / div> 
< div>第7< / div> 
< div class =container> 8th< / div> 
< div>第9< / div> 
< / div> 
  

在这种情况下， .container：nth-​​child code>不会选择第二个 div.container 元素（它具有 5th 内容）。

此外， .container： nth-child（n + 3）将选择所有 div.container 元素，因为 n 从 0 开始，对于父级子树中的第一个元素，第一个 div.container >

（0 + 3）= 3 =第三元素
n = 1：（1 + 3）= 4 =>第四元素
n = 2：（2 + 3）= 5 =>第五个元素
...

因此 div.container：nth -child（n + 3）表示所有第三，第四，第五< div.container 选择器。

在线演示 。

In my HTML I have,

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

In the above HTML I have the container class. In my CSS, I need to add some styles to .container:nth-child(3,4,5,6,..and so on). Means I need to apply all nth-child beside 1 and 2.

解决方案

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

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