這篇文章主要為大家展示了“CSS3選擇器:nth-child和:nth-of-type之間有什么區別”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS3選擇器:nth-child和:nth-of-type之間有什么區別”這篇文章吧。
先看一個簡單的實例，首先是HTML部分：
<section> <p>我是第1個p標簽</p> <p>我是第2個p標簽</p> <!-- 希望這個變紅 --> </section>
然后兩個選擇器相對應的CSS代碼如下：
p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面這個例子中，這兩個選擇器所實現的效果是一致的，第二個p標簽的文字變成了紅色：
盡管上面兩個demo的最后效果一致，但是兩個選擇器之間存在差異是必然的。
對于:nth-child選擇器，在簡單白話文中，意味著選擇一個元素：
1、這是個段落元素
2、這是父標簽的第二個孩子元素
對于:nth-of-type選擇器，意味著選擇一個元素：
1、選擇父標簽的第二個段落子元素
我們把上面的實例稍作修改，就可以看到這兩個選擇器之間的差異表現了，如下HTML代碼：
<section> <div>我是一個普通的div標簽</div> <p>我是第1個p標簽</p> <p>我是第2個p標簽</p> <!-- 希望這個變紅 --> </section>
還是與上面例子一致的CSS測試代碼：
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
這時候兩個選擇器所渲染的結果就不一樣了。
p:nth-child(2)其渲染的結果不是第二個p標簽文字變紅，而是第一個p標簽，也就是父標簽的第二個子元素。
p:nth-of-type(2)的表現顯得很堅挺，其把希望渲染的第二個p標簽染紅了。
以上是“CSS3選擇器:nth-child和:nth-of-type之間有什么區別”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
