課程
/前端開發(fā)
/HTML/CSS
/十天精通CSS3
nth-child()和nth-of-type()的區(qū)別在哪，效果都一樣啊
2019-03-27
源自：十天精通CSS3 6-11
正在回答
你把“.foo p:nth-child(2){ color:red; }? 改成.foo:nth-child(2){ color:red; } 你就會知道哪里不一樣了
效果不一樣，nth-child好像是相對于父控件中所有的子控件來確定 n 的值
而nth-of-type: 是父控件中所有指定子控件（排除其他子控件）來確定 n 的值
nth-child：篩選的范圍是當前父元素下面的所有的子元素
nth-of-type：篩選的范圍是當前父元素下面同種類型的子元素
nth-child()是指他只有一個后代的才會被選擇
<div class="father">
<p>唯一子代</p>
</div>
nth-of-type()是指他有很多后代或者只有一個子代，但是有一個特殊的，和其他子代都不一樣的，才會被選擇。
<p>我是一個段落</p>
<p>我還是一個段落</p>
<div>我是一個DIV，我們不一樣</div>
在這里選擇的子代就是div
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
1 回答nth-child（）和nth-of-type()差別是什么
1 回答nth-child()
3 回答有 nth-last-child(n)，為何沒有nth-first-child(n) ？
1 回答：nth-child(n) 中的n值
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2020-04-02
你把“.foo p:nth-child(2){ color:red; }? 改成.foo:nth-child(2){ color:red; } 你就會知道哪里不一樣了
2019-07-23
效果不一樣，nth-child好像是相對于父控件中所有的子控件來確定 n 的值
而nth-of-type: 是父控件中所有指定子控件（排除其他子控件）來確定 n 的值
2019-05-24
nth-child：篩選的范圍是當前父元素下面的所有的子元素
nth-of-type：篩選的范圍是當前父元素下面同種類型的子元素
2019-03-28
nth-child()是指他只有一個后代的才會被選擇
<div class="father">
<p>唯一子代</p>
</div>
nth-of-type()是指他有很多后代或者只有一個子代，但是有一個特殊的，和其他子代都不一樣的，才會被選擇。
<div class="father">
<p>我是一個段落</p>
<p>我還是一個段落</p>
<div>我是一個DIV，我們不一樣</div>
</div>
在這里選擇的子代就是div