css :nth

2021-03-12 07:25 jianzhan
让大家看下面1段html:

拷贝编码
编码以下:

<section>
<p>Little</p>
<p>Piggy</p> <!-- 精准定位此元素-->
</section>

下面的2种写法都可以以做到目地

拷贝编码
编码以下:

p:nth-child(2) { color: red;}
p:nth-of-type(2) { color: red;}

但二者是存在差别的
:nth-child 挑选器,在此事例中意思便是指
1.最先是个p元素
2.其次这个p元素是其父元素的第2个孩子
:nth-of-type 挑选器,在此事例中意思便是指
1.精准定位1个父元素下的第2个p元素
:nth-of-type 将会更合乎大家平常的逻辑思维方法
让大家更改下html:

拷贝编码
编码以下:

<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!-- 精准定位此元素 -->
</section>

一样用以前的2种方式:

拷贝编码
编码以下:

p:nth-child(2) { color: red; } /* 没法正明确位 */
p:nth-of-type(2) { color: red; } /* 仍然合理 */

依照以前的解释简易剖析下:
:nth-child 挑选器
最先是个p元素,沒有难题,可是其父元素的第2个孩子是<p>Little</p>,因此沒有正明确位
:nth-of-type 挑选器
父元素下的第2个p元素,更是大家要想的結果
再进1步,假如我在 h1以后添加1个h2,在这个事例中:nth-child挑选器则没法精准定位任何元素,由于父元素的第2个元素是 h2,而并不是p元素。相对性的, :nth-of-type仍然合理。
我本人感觉:nth-of-type更健硕些,虽然:nth-child貌似用的更多些。 并且绝大多数情况下,大家的念头都可以能会是“精准定位1个父元素下的第2个p元素”, 而并不是“精准定位1个父元素下的第2个元素,假如它是个p元素的话”。
我遇到的大多数数“我自问:为何这个:nth-child挑选器不起功效”的情况下,基础全是 由于我给:nth-child挑选器外置了1个标识,可是那个孩子连接点其实不是那个标识。 因此当我用:nth-child的情况下,我感觉最好是只特定父元素,:nth-child不必外置子元素标识。
像下面这样:

拷贝编码
编码以下:

dl :nth-child(2) {} / * 这样更好些 * /
dd:nth-child(2) {} / * 比这个 * /

自然,1切视实际状况而定。
现阶段Safari3.1+,IE9+,ff3.5+,Opera9.5+,Chrome2+ 都适用:nth-of-type挑选器。 假如你期待在较旧的访问器中适用,能够考虑到jQuery。 值得留意的是jQuery中:nth-child是依照规范来完成的,是从1刚开始计数,而jquery中得 :eq是从0刚开始。

自然,1切视实际状况而定。

现阶段Safari3.1+,IE9+,ff3.5+,Opera9.5+,Chrome2+ 都适用:nth-of-type挑选器。 假如你期待在较旧的访问器中适用,能够考虑到jQuery。 值得留意的是jQuery中:nth-child是依照规范来完成的,是从1刚开始计数,而jquery中得 :eq是从0刚开始。

这里也有个检测网页页面, 能够协助你更好自然地理解。
以上是我的译文,汉语翻译的不当之处的地方,谢谢指出。可立即阅读文章原文.