我對第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