在以下情况使用就需要区别

<section><h1>Words</h1><p>Little</p><p>Piggy</p>    <!-- 想要匹配这个 -->
</section>

p:nth-child(1) 会找不到匹配的元素

但 p:nth-of-type(1) 会正确找到 <p>Little</p>

原因是：

nth-child是先排序后匹配：先不区分的对所有同级兄弟元素排序，（注意是同级元素）（排序是从1开始）找到第n个之后再看是否匹配；

而nth-of-type是先匹配后排序：只对匹配的同级兄弟元素排序，再从中找到第n个。

他们的语法几乎没有差别

目标元素选择器：nth-child(N)

目标元素选择器：nth-of-type(N)

其中

目标元素选择器可以是复合选择器
N代表选中第几个元素：可以是数字、关键字(odd奇/even偶)、公式an+b

对公式an+b的个人理解：

b是初始值，表示从第b个开始

an是步长，n代表每次+1，-n代表每次-1，3n代表+3

li:nth-child(5) {color: green;
}

li:nth-child(n+6) { color: green;
}

li:nth-child(-n+5) {color: green;
}

li:nth-child(4n+1) {color: green;
}

一个例子理解何为同一父元素下的同级元素

看一个nth-child的看似复杂的例子：

<nav><div class="nav-common"><div class="nav-items"><a href="#"></a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div></div><div class="nav-common"><div class="nav-items"><a href="#"></a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div></div><div class="nav-common"><div class="nav-items"><a href="#"></a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div><div class="nav-items"><a href="#">abc</a><a href="#">abc</a></div></div></nav>

实现的效果：

css部分大量用结构伪类设置样式（只展示了想描述的问题相关的样式设置）

/* 添加灰色框线 */
/* .nav-items a 要作为整体来看 */
.nav-items a:nth-child(1) {border-bottom: 1px solid #ccc;
}
.nav-items:nth-child(n+2) {border-left: 1px solid #ccc;
}/* 背景图 */
.nav-items:nth-child(1) a{/* 巧妙利用了层叠 border-bottom: 1px solid #ccc;*/border: 0;background: url(../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}

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相关推荐

最新文章

热门文章