本文详细解析了CSS中nth-child和nth-of-type选择器的使用方法及区别，通过具体实例展示了这两种选择器如何应用于网页布局中，帮助读者更好地理解并运用这些高级选择器。
****三者都不以索引0为开始，参数均从1开始nth-child（n）【n>=1】,nth-child(an+b)【an+b>=1】, nth-of-type(n)【n>=1】
****nth-child(an+b）中的n是从0开始的，（当b>0时） → 也就是如果没有b：nth-child(an），n需要从1开始
****nth-child的开始跟其他元素选择器相关，
而nth-of-type和其他元素选择器无关，
例子：
<style>
/*此时：p:nth-of-type(1) 【父元素下的第几个p元素】和 p:nth-child(2)【父元素下的第几个子元素】 均是对
“<p>第一个段落。</p>”*/
p:nth-of-type(1)
{
background:#ff0000;
}
p:nth-child(2)
{
background:#ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
