第ntypes和第n孩子
对于第n类伪类我有点困惑，应该如何工作 – 特别是与第n类子类相比。
也许我有错误的想法，但给了这个结构
<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> ..第三个子元素（第一个带类标签）应该（也许？）可select
.row .label:nth-of-type(1) { /* some rules */ }
但是，至less在这里铬，它不select它。 如果它是行中的第一个孩子，这与第n孩子是一样的，那么它只会起作用，因此，这和第n个types有什么区别呢？
nth-child伪类是指“第N个匹配的子元素”，这意味着如果你有一个结构如下：
<div> <h1>Hello</h1> <p>Paragraph</p> <p>Target</p> </div>
然后， p:nth-child(2)将select也是ap的第二个孩子（即带有“Paragraph”的p ）。
p:nth-of-type将select第二个匹配的p元素 （即我们的目标p ）。
这里是Chris Coyier @ CSS-Tricks.com关于这个主题的一篇很棒的文章
你的原因是因为type指的是元素的types（即div ），但是第一个div与你提到的规则（ .row .label ）不匹配，所以规则不适用。
原因是， CSS从右到左被parsing ，这意味着浏览器首先查找:nth-of-type(1) ，确定它searchtypes为div的元素，这也是它的第一个types，匹配.row元素和第一个.icon元素。 然后它读取该元素应该有.label类，这不匹配上述。
如果要select第一个标签元素，则需要将所有标签包装在自己的容器中，或者只需使用nth-of-type(3) （假设总是有2个图标）。
另一个select，会（可惜）是使用…等待它… jQuery：
$(function () { $('.row .label:first') .css({ backgroundColor:"blue" }); });
.label:nth-of-type(1)
这里的“types”是指元素的types。 在这种情况下， div ，而不是类。 这并不意味着.label的第一个元素，它意味着它的types的第一个元素也有一个label类。
没有labeltypes的索引1的元素。
在添加了10个元素的图片中，8个是<p> ，2个是<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*/ }
而代码中的第二个红色灯泡不起作用，因为我不是stream中的第一个元素
section i:nth-child(1) { background-color: red; /*[first-child of i in the flow]NO */ }
图中的蓝色灯泡表示stream程中的第一种types
section i:nth-of-type(1) { background-color: blue; /*the type i of first child in the flow*/ }
:nth-of-type被用来select一个特定types的兄弟。 按照types我是指<li> ， <img> ， <div>等一类标签。
:nth-child用于select特定父标签的子项，而不考虑types
例子: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：
注意在<ul>标签和:nth-child伪类之间有一个空格
ul :nth-child(even) { background-color: red }
结果： https ： //jsfiddle.net/o3v63uo7/
下面是一个简单的例子，它显示了第n个孩子与第n个孩子之间的区别。
考虑下面的HTML
<div> <p>I am first</p> <div>I am secong</div> <p>I am 3rd</p> </div>
使用nth-of-child
p:nth-of-child(2){ background:red; }
红色背景将被应用于div内的第二个p元素。
发生这种情况是因为孩子中的第n个基本意思是在容器内find第n个p标签（在本例中是第2个p标签）
使用nth-child
p:nth-child(2){ background:red; }
这里没有应用CSS。
发生这种情况是因为n-child基本上是指在容器中find第n个标签（在这种情况下，第二个标签是div）并检查它是否是p标签
这里是一个例子：
<div> <div >0</div> <div >1</div> <div >2</div> <div >3</div> <div >4</div> <div >5</div> </div>
这个select器： div div:nth-child(1)将selectdiv的第一个孩子，但是另一个条件是孩子必须是div。 这里的第一个孩子是一个<div>0</div>但是如果第一个孩子是一个段落p ： <p>0</p>这个select器不会影响页面，因为没有第一个孩子div第一个孩子是p 。
但是这个select器： div div:nth-of-type(1)如果第一个孩子是一个<div>0</div> div div:nth-of-type(1)会影响它，但是如果第一个孩子是<p>0</p>影响第二个孩子<div>1</div>因为这是他的divtypes的第一个孩子。
