gigipop 2019-06-26
nth-child 和 nth-of-type是CSS的两个伪选择器。要对相同位置或相似做操作的时候非常有用。前者的字面意思是选择第几个子元素,后者的字面意思是选择某类型的第几个元素。
首先来看他们的完整格式。
selector:nth-child(an+b) /* 如 tr:nth-child(3), p:nth-child(2n+1) */ selector:nth-of-type(an+b) /* 如 p:nth-of-type(3), .info:nth-of-type(2n) */
前面的选择器(selector)可以是标记类型(markup type),也可以是样式(style)。后面的序列有不同的表达,n是从0开始数起,即0,1,2...,得出来的结果就是选中的序列。我们分开来一个个看。
先看selector部分。an+b我们先简化为一个数字,只选择第几个元素。
有如下HTML代码:
<div> <p class="ph">ph1</p> <p class="ph">ph2</p> <p class="info">ph3</p> <p class="info">ph4</p> <p class="ph">ph5</p> </div>
那么上面两个css的结果如下
p:nth-child(2) { /* 样式生效,背景显示红色 */ background-color: red; } .info:nth-child(2) { /* 匹配不到元素,没有任何效果。你以为会匹配到<p class="info">ph4</p>,结果并没有 */ background-color: blue; }
解释:nth-child的查找步骤有两步:
1. 按序列因子找到对应子元素 2. 检查对应元素是否与selector匹配
第一步查找是按照序号绝对查找,写明是第几个子元素,就定位到第几个元素。nth-child(2)就是要找第二个子元素,也就是<p class="ph">ph2</p>
第二步检查selector是否匹配。<p class="ph">ph2</p>的类型是p,因此上面的第一个样式应用成功;class有一个类型是ph,但第二样式提供的是.info,不匹配。因此应用失败。
同样的HTML代码
<div> <p class="ph">ph1</p> <p class="ph">ph2</p> <p class="info">ph3</p> <p class="info">ph4</p> <p class="ph">ph5</p> </div>
如下的两个样式
p:nth-of-type(2) { /* 样式生效,<p class="ph">ph2</p> 背景显示红色 */ background-color: red; } .info:nth-of-type(2) { /* 匹配不到元素,没有任何效果。你以为会匹配到<p class="info">ph4</p>,结果并没有 */ background-color: blue; }
解释:nth-of-type的查找过程也有两步:
1. 找出同标记类型下的第n个元素。 2. 找出匹配selector的元素。
nth-of-type(2)找的是同类型的第2个元素,这里只有一种类型p,因此找到的是<p class="ph">ph2</p>。那么p:nth-of-type(2)这个样式应用成功,因为<p class="ph">ph2</p>匹配seletor “p”。但是.info:nth-of-type(2)则应用失败,因为<p class="ph">ph2</p>的class里没有.info。
假设把HTML代码改一下,将第二个的类型改成别的,比如span,即
<div> <p class="ph">ph1</p> <span class="ph">ph2</spanp> <p class="info">ph3</p> <p class="info">ph4</p> <p class="ph">ph5</p> </div>
那么.info:nth-of-type(2)就应用成功了,匹配到的是<p class="info">ph3</p>。它是第二个p类型元素,而且class包含.info
总结:
selector:nth-child(n) 找到这样的元素,它是第n个子元素,且匹配selector
selector:nth-of-type(n) 找到这样的元素,它是统一标记类型的第n个元素,且匹配selector
《未完》