nth-child以及nth-of-type

nth-child可以满足一些独特的元素选择上，但是有一个nth-of-type的双胞弟弟，流浪在外，蛮少见到，写个代码验一下血统。

样式：

li:nth-child(2){color:red;
}
li:nth-of-type(2){color:blue;
}
li:last-of-type{color:lightblue;
}
li:last-child{color:gray;
}

页面：

<ul><span>start</span><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><span>end</span>
</ul>

结果：

看起来，li:nth-child跟名字一样是选择父元素下第n个元素，然后发现是li就生效，如果不是li就“查无此人”，而nth-of-type则不一样，是先让所有的li排个队，然后把第n个找出来(如果确实没有那就真的无此人了)。

我觉得这个太坑了，就好像一个妖怪说要吃路过的第二个男子，然后放过了第一个男子，第二个来的发现是个女子，妖怪可能不吃这个，等待下一个男子，难道妖怪会觉得这是上天点化他，要他弃恶从善么，从此不再吃人么？？Excuse me？

这个其实从某种意义上来说是nth-of-type更加符合我们心里所期望的结果，而nth-child容易在append元素或者prepend的时候，让我们的css产生误差。因此以后还是多用nth-of-type来查找会更加符合心中期望。如果一定要用也可使用ul :nth-child(2)来解决问题。

本妖怪就吃来的第二个，唐僧最好，猪八戒也凑活。

转载于:https://www.cnblogs.com/mydia/p/6687595.html

nth-child和nth-of-type相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
Sass函数：列表函数nth
语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...
PHP——通过下拉列表选择时间（转）
实现效果: 主页代码: <script type="text/javascript" src="jquery.min.js"></script ...
[翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
前端的各种各样的面试题大全
问题此部分用于自测.如有疑惑,可参看后文的答案部分. HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 介绍一 ...
Sizzle引擎--原理与实践（二）
主要流程与正则表达式分块 var chunker = /((?:$(?:\([^()]+$|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['& ...
Jquery--遮罩弹窗特效
/*! jQuery v1.7.2 jquery.com | jquery.org/license*/(function(a,b){function cy(a){return f.isWindow(a ...
2014年最新前端开发面试题
2014年最新前端开发面试题(题目列表+答案完整版) 转载自https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Qu ...
python selenium 等待元素出现_Python Selenium等待加载几个元素
考虑到Mr.E.和Arran的评论,我在CSS选择器上完全遍历了列表.棘手的部分是关于我自己的列表结构和标记(更改类等),以及动态创建所需的选择器并在遍历期间将它们保存在内存中. 我通过搜索任何未加载 ...

nth-child和nth-of-type

nth-child以及nth-of-type

nth-child和nth-of-type相关推荐

最新文章

热门文章