好看的电视剧,小说排行榜,绝色狂妃仙魅小说

語法：

E:nth-of-type(n) { sRules }

匹配父元素的第n個子元素E。

需要注意3個要點：

首先，因為匹配的是父元素的子元素，這意味著E元素必須作為某個元素的子元素存在（E元素的父元素最高是html，也就是說E元素最高是body，這表示任何非html的元素都符合這個約束，因為html元素是根元素。）
其次，匹配的是父元素的第n個為E的子元素（被命中的不一定是第n個子元素，因為匹配的不是第n個子元素，而是第n個為E的子元素）
來看下面這個例子：

HTML示例代碼：

<div id="nubm75x" class="demo"> p1 p2 span1 p3 span2 </div>

如上HTML，假設要命中第3個p元素，代碼如下：

.demo p:nth-of-type(3) { color: #f00; }

可以看到此時 .demo 的第4個子元素會被命中，因為 .demo 的第4個子元素才是它的第3個p子元素
再次，只能匹配與E元素同級的元素，即：E元素的兄弟元素
來看下面這個例子：

HTML示例代碼：

<div id="nubm75x" class="demo"> span1 span2 span3 span4 </div>

如上HTML，如果我想匹配其中的第2個span，代碼如下：

.demo span:nth-of-type(2) { color: #f00; }

結果span2確實沒有被命中，因為span2并不是.demo的第2個span子元素。從代碼中能看到span1和span4是同級，span2和span3同級，因為span3和span4分別是這2組層級中的第2個span，所以最終span3和span4都被命中了。

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
6.0-8.0	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+
IE9.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0+