彻底理解nth-child和nth-of-type的区别

原文：https://www.cnblogs.com/pssp/p/5991029.html

为什么要写篇呢，主要是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样，于是打算写下来。

nth-child倒很好理解就是选择第几个，代码如下：

<style>p:nth-child(2),p:nth-child(7){color:red;}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>

效果如下：

可以看出nth-child是根据元素的个数来计算的，尽管我们在:nth-child前面加了p。这个没啥好说的，但nth-of-type要是不研究一下还真容易理解错，它说的是按照类型来选择，看下面这个例子。

<style>p:nth-of-type(1),p:nth-of-type(3){color:red;}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>

效果如下：

这个也不难理解就是按照类型来计算，碰到一个同类型就加1，那你肯定会说既然如此那有什么好说的，关键如果像下面这样呢，如下：

.item:nth-of-type{color:red}

这种情况又是怎么个案类型法？所以今天主要是探讨这个问题。

<style>.item:nth-of-type(3){color:red;}
</style>
<h1>标题</h1>
<p class="item">这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span class="item">这是span</span>
<span class="item">这是span</span>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>

效果如下：

可以看到这里是选中了两个的，不同类型会被当作多类，只要符合选择器规范都会选中，额，好像有点简单哈，主要是这个例子写的太好了。就这样。还是总结一下吧。

总结

nth-child
按照个数来算。
nth-of-type
按照类型来计算，如果是class那么碰到不同类型的，单独一类，符合条件的选中。

彻底理解nth-child和nth-of-type的区别相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
如何理解数据质量中准确性和一致性的区别？
大家周末好,我是志明. 今天回忆并记录一下前几天群里看见的某个话题讨论. 1.有位读者问道:"为什么数据质量维度同时包括准确性和一致性,不应该是准确性包括一致性吗,总感觉在中文字面上这两个词 ...
5分钟理解Iass Pass SasS三种云服务区别
5分钟理解Iass Pass SasS三种云服务区别其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼.中间.低层三大块. 那么我们就可以把Iass(基础设施).Pass ...
plc与计算机控制区别,理解plc与集散控制系统和工业控制计算机的区别.ppt
理解plc与集散控制系统和工业控制计算机的区别可编程序控制器应用第九讲期末复习指导(一) 中央广播电视大学课程主要内容可编程序控制器应用课程考试说明第一部分可编程序控制器基础 1.plc的 ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
深入理解：js标签中的type=“text/JavaScript“，表示什么意思
一·案例代码如下: <script type="text/javascript">function onchangeFun() {//注意函数名不能与已经存在的关键字相 ...
TypeScript中interface 与 type的区别，你真的懂吗？
在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别, 分别在 ...
ElasticSearch : Index 和 Type 的区别
对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 type,还是给它新建一个 index?要想回答这个问题,我们必须先理解这两者是怎么实现的. 过去 ...
doc es 中type_ElasticSearch: Index 和 Type 的区别
原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...
java中字符流字节流_理解Java中字符流与字节流的区别
1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个"流动的方向",通常可 ...

彻底理解nth-child和nth-of-type的区别

总结

彻底理解nth-child和nth-of-type的区别相关推荐

最新文章

热门文章