详解CSS3挑选器:nth

日期:2021-03-02 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

先看1个简易的案例,最先是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; }

上面这个事例中,这两个挑选器所完成的实际效果是1致的,第2个p标识的文本变为了鲜红色:

虽然上面两个demo的最终实际效果1致,可是两个挑选器之间存在差别是必定的。

针对:nth-child挑选器,在简易白话文文中,代表着挑选1个元素:

1、这是个段落元素
2、这是父标识的第2个孩子元素

针对:nth-of-type挑选器,代表着挑选1个元素:

1、挑选父标识的第2个段落子元素

大家把上面的案例稍作改动,便可以看到这两个挑选器之间的差别主要表现了,以下HTML编码:

<section>
    <div>我是1个一般的div标识</div>
    <p>我是第1个p标识</p>
    <p>我是第2个p标识</p>  <!-- 期待这个变红 -->
</section>

還是与上面事例1致的CSS检测编码:

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

 

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

这时候候两个挑选器所3D渲染的結果就不1样了。

p:nth-child(2)其3D渲染的結果并不是第2个p标识文本变红,而是第1个p标识,也便是父标识的第2个子元素。

p:nth-of-type(2)的主要表现显得很挺立,其把期待3D渲染的第2个p标识染红了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:20 个 CSS 高級技能汇总(强烈推荐) 返回下一篇:没有了