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 siblings，对于任何 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 内容）。因为该元素不是其父级的第二个子级，在父级的子级树中。

另外，.container:nth-child(n+3) 将选择所有div.container 元素，因为n 从0 开始，是父子树中的第一个元素，而第一个div.container 是第四个子元素 的父级。

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) 代表所有与div.container 选择器匹配的3rd、4th、5th、...子元素。

Online Demo.

Answer 2

如果只是 1 和 2，您不希望将样式应用于您可以执行以下操作：

.container {
    background: yellow;
}

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

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

Answer 3

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

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

Demo Fiddle

Answer 4

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

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