我对第n类伪类有点困惑，以及它应该如何工作 - 特别是与第n类子类相比。nth-type-n-child
也许我有错误的想法，但由于这种结构
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
..the第三子元素（先用类标签）应该（也许？）可选择与
.row .label:nth-of-type(1) {
/* some rules */
}
然而，至少在这里铬，它不会选择它。如果它是行中的第一个孩子，这与第n个孩子相同，那么它只能起作用 - 因此，这和第n个类型有什么区别？
的nth-child伪类指的是“第N个匹配的子元素”，如果你有一个结构如下含义：
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
然后p:nth-child(2)将选择第二个孩子，这也是AP（即带“段落”的p）。 （即我们的目标p）。
Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com
你打破的原因是因为类型是指元素（即div）的类型，但第一个div不匹配你所提到的规则（.row .label），因此，该规则不适用。
原因是，CSS is parsed right to left，这意味着浏览器首先看上去就:nth-of-type(1)，确定它搜索div类型的元素，这也是第一个其类型，即.row元素相匹配，并且第一，.icon元素。然后它读取该元素应该有.label类，这与上面没有任何匹配。
如果您想要选择第一个标签元素，您需要将所有标签包装在自己的容器中，或者只需使用nth-of-type(3)（假设总是有2个图标）。
另一个选择，（可惜）会使用...等待它...jQuery的：
$(function() {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
.label:nth-of-type(1)
“type”这里指的是元素的类型。在这种情况下，div，而不是类。这并不意味着第一个元素是.label，它代表了它的类型的第一个元素，它也有一个label的类。
没有一类label的元素，它们的索引号为1。
为什么我们在4年后还没有'n级'？ – deathlock 2016-10-12 05:04:50
，8是<p>和2是<i>，两个阴影部分元件被指示<i>其余八是<p>
的CSS为页面将转到此处：
<style>
* {
padding: 0;
margin:0;
}
section p {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section i {
width: 20px;
height: 20px;
border:solid 1px black;
border-radius: 15px;
margin:20px;
float: left;
}
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
</style>
</head>
<body>
<section>
<p></p>
<p></p>
<p></p>
<p></p>
<i></i>
<p></p>
<i></i>
<p></p>
<p></p>
<p></p>
</section>
</body>
第一个绿色指示灯指示
section p:nth-child(1) {
background-color: green; /*first-child of p in the flow*/
}
并在代码第二红色灯泡不起作用，因为i不在流
section i:nth-child(1) {
background-color: red; /*[first-child of i in the flow]NO */
}
和在图片中的蓝色灯泡第一元素表示在流动
第一类型i的section i:nth-of-type(1) {
background-color: blue; /*the type i of first child in the flow*/
}
这里是jsfiddle http://jsfiddle.net/anandw3c/4WBMa/ – anand 2014-04-25 12:16:57
:nth-of-type用于选择特定类型的兄弟节点。 通过I型的意思是一类型的标签如<li>，<img>，<div>等
:nth-child用于选择一个特定的父标记的儿童而不考虑类型
实施例的:nth-of-type
HMTL：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS：
请注意，在<li>标记和伪类nth-of-type之间没有空格。
li:nth-of-type(odd) { background-color: #ccc; }
结果： 例https://jsfiddle.net/79t7y24x/
:nth-child
HTML：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>
CSS：
注意这里有我S中的<ul>标签和:nth-child伪类之间的空间
ul :nth-child(even) { background-color: red }
继承人是一个简单的例子，这表明VS第n-的型第n个孩子之间的差异。
<div>
<p>I am first</p>
<div>I am secong</div>
<p>I am 3rd</p>
</div>
p:nth-of-child(2){
background:red;
}
红色背景将被应用到div内第二p元素。
这是因为第n-的孩子bascially意味着找到第n个p标签（在这种情况下，第二个p标签）的容器
p:nth-child(2){
background:red;
}
这里没有CSS应用于第n个孩子。
这是因为第n个孩子基本上是指找一个容器内第n个标签（在这种情况下，第二个标签是DIV），并检查它是否是p标签
下面是一个例子：
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
这个选择器：div div:nth-child(1)将选择div的第一个孩子，但是另一个条件是孩子必须是div。 这里的第一个孩子是<div>0</div>但是如果第一个孩子是一段p：<p>0</p>这个选择器不会影响页面，因为没有第一个孩子div第一个孩子是p。
但这种选择：div div:nth-of-type(1)如果第一个孩子是个<div>0</div>会影响它，但如果第一胎是<p>0</p>现在他将影响第二个孩子<div>1</div>，因为这是他div型的第一个孩子。
element:nth-of-type(p) //p=integer , basically return the DOM Element with respect of body.
Let us understand this with an example
<html>
<head>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**This above html will look like this.**
Now suppose We have to style Second Item in UnOrderd list.
In this case we can use nth-of-type(index) selector wrt DOM body.
we can achieve styling like this
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
explanation : div:nth-of-type(2) by this we are trying to tell find the second div in html body,after that we have second div accessible ,now we can dig inside div using same nth-of-type selector,next we are using li:nth-of-type(2) so now we can find second list inside second div and styling it .
Final Code :
<html>
<head>
<style type="text/css">
div:nth-of-type(2) li:nth-of-type(2){
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p> This is paragraph in first div</p>
<input type="text" placeholder="Enter something"/>
<p>This is a paragraph </p>
</div>
<div>
<p>This is paragraph in second div</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>
<label> This is label <strong>inside Unordered List</strong></label>
</li>
</ul>
</div>
</body>
</html>
**And Final output will look like this**
我不知道这一切都将打破（IE8及以前肯定） – 2012-02-16 15:28:02
IE8和更低的肯定不支持它，但几乎一切是罚款（包括IE9） – dmp 2012-02-16 15:34:08