CSS nth-child大于和小于

Question

在我的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,..and so on)添加一些样式。意味着我需要在1和2旁边应用所有nth-child。

Answer 1

:nth-child()不适用于类，它会查找元素本身。您需要通过包装器包装.container div并使用以下内容：

.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

澄清:nth-child()

使用.container:nth-child(n+3)可能有效也可能无效。因为，:nth-child()伪类表示匹配选择器的nth子元素（在这种情况下为.container）。

如果.container元素不是父的 nth-child ，则不会选中该元素。

来自Spec：

  

:nth-child(an+b)伪类表示法表示一个元素   在文档树中有an+b-1 兄弟姐妹之前的任何内容   n的正整数或零值，并且具有父元素。

考虑这个例子：

<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>

在这种情况下，.container:nth-child(2)不会选择第二个div.container元素（其中包含5th个内容）。因为该元素不是其父元素的 2nd 子元素，所以在父元素的子树中。

此外，.container:nth-child(n+3)会选择所有div.container个元素，因为n从0开始，用于父级子树中的第一个元素，第一个元素div.container }是其父母的第4个孩子。

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
...

因此div.container:nth-child(n+3)代表所有第3 ，第4 ，第5 ，...匹配div.container的子元素选择器。

<强> Online Demo

Answer 2

的CSS：

.wrapper div:nth-child(n+3) {    /* you style*/   }

原因和解释

 (0+3) = 3 = 3rd Element
 (1+3) = 4 = 4th Element
 (2+3) = 5 = 5th Element  and so on ... where n=0,1,2,3.....

Live example >>

Answer 3

尝试以下代码。它会将样式应用于除1和2之外的所有.container类：

.container+.container~.container{
   /*styles*/
}

Demo Fiddle

Answer 4

如果它只是1和2你不希望应用的样式可以做这样的事情：

.container {
    background: yellow;
}

.container:first-child,
.container:first-child + .container {
    background: transparent;
}

黄色背景将适用于除第一个孩子和第一个孩子之外的每个容器。

Answer 5

对于那些在动态解决方案之后的人（如果您不想对列宽进行硬编码等），我已根据javascript solution发布了this excellent answer。

<强> Working example

<强>用法：

// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);

<强>标记：

<div id="freezer">
  <table>
    <thead>
      <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    </thead>
    <tbody>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
      <tr><th>Frozen</th><td>Not frozen</td><td>Not frozen</td></tr>
     </tbody>
  </table>
</div>

Answer 6

.container ~.container{
     padding: 0
     margin: 0
 }

我曾经申请除头等舱以外的所有课程。