Html CSS nth-child 大于和小于
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22035799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS nth-child for greater than and less than
提问by user960567
In my HTML I have,
在我的 HTML 中，
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................
In the above HTML I have the containerclass. 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-childbeside 1 and 2.
在上面的 HTML 中，我有这个container类。在我的 CSS 中，我需要将一些样式添加到.container:nth-child(3,4,5,6,..and so on). 意味着我需要应用除nth-child1 和 2 之外的所有内容。
回答by Hashem Qolami
:nth-child()doesn't work on classes, it looks for the element itself. You'd need to wrap the .containerdivs by a wrapper and use the following:
: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>
工作演示。
Clarifying on :nth-child()
澄清 :nth-child()
Using .container:nth-child(n+3)may or may not work. Because, :nth-child()pseudo-class represents nthchild element matching the selector (.containerin this case).
使用.container:nth-child(n+3)可能有效也可能无效。因为，:nth-child()伪类表示nth匹配选择器的子元素（.container在这种情况下）。
If the .containerelement isn't the nth-childof its parent, it won't be selected.
如果.container元素不是第n个孩子其家长，也不会被选中。
From the Spec:
从规范：
The
:nth-child(an+b)pseudo-class notation represents an element that hasan+b-1siblingsbefore it in the document tree, for any positive integer or zero value ofn, and has a parent element.
的
:nth-child(an+b)伪级符号代表具有一个元素an+b-1的兄弟姐妹之前它在文档树中，对于任何正整数或零值n，且具有父元素。
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.containerelement (which has 5thcontent). Because that element is not the 2ndchild of its parent, in parent's children tree.
在这种情况下，.container:nth-child(2)不会选择第二个div.container元素（有5th内容）。因为该元素不是其父元素的第二个子元素，在父元素的子树中。
Also, .container:nth-child(n+3)will select all the div.containerelements because nstarts from 0for the first element in the parent's children tree, and the first div.containeris the 4th childof its parent.
此外，.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
...
Hence div.container:nth-child(n+3)represents all the 3rd, 4th, 5th, ... child elements matching div.containerselector.
因此div.container:nth-child(n+3)表示所有3rd, 4th, 5th, ... 匹配div.container选择器的子元素。
在线演示。
回答by suraj rawat
css:
css：
.wrapper div:nth-child(n+3) { /* you style*/ }
Reason and Explanation
原因及说明
(0+3) = 3 = 3rd Element
(1+3) = 4 = 4th Element
(2+3) = 5 = 5th Element and so on ... where n=0,1,2,3.....
回答by Zword
Try the following code.It will apply styles to all .containerclasses except 1 and 2:
试试下面的代码。它会将样式应用于.container除 1 和 2 之外的所有类：
.container+.container~.container{
/*styles*/
}
Demo Fiddle
演示小提琴
回答by pstenstrm
If it's just 1 and 2 you don't want the style applied to you can do something like this instead:
如果它只是 1 和 2，您不希望将样式应用于您可以执行以下操作：
.container {
background: yellow;
}
.container:first-child,
.container:first-child + .container {
background: transparent;
}
The yellow background will apply to every container except for the first child and the one following it.
黄色背景将应用于每个容器，除了第一个子项和它之后的子项。
回答by toomanyredirects
For those after a dynamic solution (if you don't want to hard-code the column widths etc), I've published a javascript solution, based on this excellent answer.
对于动态解决方案之后的那些（如果您不想对列宽等进行硬编码），我已经发布了一个javascript 解决方案，基于这个优秀的答案。
Usage:
用法：
// After including tableColumnFreeze.js
var freezer = document.getElementById('freezer');
new TableColumnFreeze(freezer);
Markup:
标记：
<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>
