1.官方解釋:
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。
2.大白話
p:nth-child(2) 選擇p同級元素中的(從前到后的)第二個元素
p:nth-of-type(2) 選擇p同級元素中的第二個p元素
第一個是不管誰都得算上,第二個只管看p元素
簡單的實例了解一下
p:nth-child(2):
<style> p:nth-child(2) { background:hotpink; } /*選中的是p的父元素的第二個元素*/ </style>
<body>
<h1>這是標題</h1>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<p>第四個段落。</p>
</body>
p:nth-of-type(2):
<style> p:nth-of-type(2){background: hotpink;} /* 選中的是p的父元素的子元素中第二個p*/ </style> <body> <h1>這是標題</h1> <p>第一個段落。</p> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> </body>