摘要：和的区别我这里就不说了，只说。首先我们设定下面这样一个结构，然后通过下面四个例子真正理解这是这是这是这是这是一通过标签选择第个显然这是符合我们预期的，是广大人民群众喜闻乐见的情形。
nth-of-type和nth-child的区别我这里就不说了，只说nth-of-type。
首先我们设定下面这样一个结构，然后通过下面四个例子真正理解nth-of-type1.一、通过div标签选择第2个div这是div2.这是div.common3.这是p.common
4.这是div.common5.这是p.common
div:nth-of-type(2) {
background: red;
}
显然这是符合我们预期的，是广大人民群众喜闻乐见的情形。
二、通过common类名选择第3个.common.common:nth-of-type(3) {
background: red;
}
同样也是符合我们预期的——选中拥有common类名的第三个元素。
可能有些朋友看到这，嘴角已经微微上扬，露出轻蔑而天真的笑容，心想：标题取得咋咋呼呼，结果都是些尝龟操作，不值一提不值一提~
好，那就来点不那么尝龟的！
三、通过common类名选择第1个.common.common:nth-of-type(1) {
background: red;
}
是的，你没有看错，我的图也没错，她确实选中了第2个.common，什么原因呢？这个例子暂时看不出来，我们结合下面的第四个例子应该能看出些端倪。
.common:nth-of-type(2) {
background: red;
}
有些朋友看到这更绝望了，明明括号里只有2没带n，却选中了2个！
刚刚露出天真笑容的朋友脸上的笑容凝固了，心想：nth-of-type变了，变得陌生了，不再是我认识的那个单纯的nth-of-type了。
但是朋友你不用垂头丧气，仔细观察会发现：这两个被选中的元素都是.common，但是他们的标签名却不同，而且恰好是各自标签名的第二个！
nth-of-type以类名选择元素时，会根据第一个拥有此类名的元素的标签类型（假设为div）来确定候选元素的标签（div），即使元素未拥有此类名，但只要是此标签类型（div）就可成为候选元素，然后根据序列号在候选元素中确定一个元素，如果被确定的这个元素也拥有此类名则此元素被选中，否则不选中任何元素；
另外，若拥有此类名的元素标签类型不同，则将不同标签分组，分别应用上述规则。
根据这个结论，再看三、四两个例子，萦绕在我们眼前的迷雾渐渐消散了。
有些朋友可能会猛然想起第二个例子一开始就是符合我们原先的“想当然规则”的，但仔细对比会发现那只是个美丽的巧合，第二个例子仍然符合我们的推论，进一步证明了推论的正确性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116262.html
摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。 关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家 按标签进行选择 写法一： ...
摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。 关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家 按标签进行选择 写法一： ...
摘要：关于的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家按标签进行选择写法一使用得出的效果如图使用得出的效果如图由以上两个效果图可知，在父级元素下只有标签的时候，两者没什么区别。 关于nth-child && nth-of-type的区别，网上很多人的解释是存在误区，解释是不够清楚的，今天在这里把个人测试过的分享给大家 按标签进行选择 写法一： ...
摘要：所以当我们思考能否用来实现时还应考虑到的结构，能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个组件该做的事，希望越来越好 我们今天用css来实现一个常见的tab切换效果 查看原文可以有更好的排版效果哦 先看效果 https://codepen.io/xboxyan/pe... 前言 哪些简单的效果可以考虑用css来实现呢，目前...
摘要：选择器大致可以分成类基本选择器，层次选择器，属性选择器，伪类，伪元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是...
阅读 1509·2021-09-26 10:00
阅读 2760·2021-09-06 15:00
阅读 3317·2021-09-04 16:40
阅读 2176·2019-08-30 15:44
阅读 535·2019-08-30 10:59
阅读 1740·2019-08-29 18:34
阅读 3492·2019-08-29 15:42
阅读 2108·2019-08-29 15:36
