nth-child与nth-of-type的区别

先说nth-child吧，这个比较好理解，举个栗子

<div class="wrap"><p>水果</p><span>apple</span><span>banana</span><span>orange</span><span>peach</span><span>lemon</span><span>grape</span>
</div>
<div class="wrap"><p>喝的</p><span>yogurt</span><span>milk</span><span>wine</span><span>coffee</span><span>cocacola</span><span>tea</span>
</div>

.wrap span:nth-child(2)
{color:red;
}

结果

ele:nth-child(n) 就是要同时满足

1、第n个元素，这个n是相对于父元素下的所有元素来计数的，不区分是p还是span（此处n=2，即定位到父元素下的第2个元素）

2、该元素必须是ele元素（此处必须是span）

同样滴，class:nth-child(n)也适用

如果将以上样式改为下面，还有用么

.wrap span:nth-child(1)
{color:red;
}

结果

显然无效，因为会去找第一个元素就是 <p>水果</p> ，但是这个又不是span，所以不满足

然后就是nth-of-type了，这是个奇葩哈哈我对它有过误解

先来个正常的

.wrap span:nth-of-type(1)
{color:red;
}

结果

它不像nth-child完全根据位置来选择的，而是根据type。这里的type就是span元素，只看.wrap的span元素，这就叫type，所以apple是第一个span

再来一个我踩过的坑

<div class="wrap"><p>水果</p><span>apple</span><span class="item">banana</span><span class="item">orange</span><span>peach</span><span>lemon</span><span>grape</span>
</div>
<div class="wrap"><p>喝的</p><span>yogurt</span><span>milk</span><span>wine</span><span>coffee</span><span class="item">cocacola</span><span class="item">tea</span>
</div>

.wrap .item:nth-of-type(2)
{color:red;
}.wrap .item:nth-of-type(3)
{color:blue;
}

结果

先看第一段‘水果’，它是怎么找的呢？

class=item对应的元素是span，所以会去找同一父元素.wrap下的所有span元素。然后定位到span的第2、3个元素，你以为这样就匹配到了？？其实有个隐藏点。这里还要去看第2、3个span元素是不是有item样式，符合才会选中。‘喝的’那一段就是很好的验证

第二段中，class=item对应的元素是span，所以会去找同一父元素.wrap下的所有span元素。然后定位到span的第2、3个元素；但此时的milk、wine是都没有item样式的，所以都不符合，都不选中。

呐所以

ele:nth-child( )、class:nth-child( )、ele:nth-of-type( ) 都相对好理解些

class:nth-of-type( ) 这个奇葩在使用的时候还要注意下

补充下：

nth-child(n) nth-of-type(n)

n取值范围是：0 ~ 正无穷

() 括号的值域是：1、2、3、4、5 。。。（0是无效的）

举个栗子吧

nth-of-type(-n+5)

括号中的值域就是：负无穷 ~ 5

但最终选中的是第1-5个（0是无效的）

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元素必须是某个父元素下的第 ...
TypeScript 里 interface 和 type 的区别
StackOverflow 上的讨论链接 Interface vs Type alias in TypeScript 2.7 Differences Between Type Aliases and ...
typescript和 java区别_typescript中interface和type的区别
相同点都可以描述一个对象或者函数 interface interface User { name: string age: number } interface SetUser { (name: s ...
雷电3和Type C区别
雷电3和USB Type C究竟有什么区别?:雷电3和USB Type C究竟有什么区别? - 知乎https://zhuanlan.zhihu.com/p/50034258
三分钟了解interface和type的区别
对typescript 有一定了解的,会发现 interface 和 type 很相似,类型定义上,很多时候,用两种方式都能实现. 三分钟直入主题, 除了语法不同外,interface和type主要有 ...
TypeScript中interface 与 type的区别，你真的懂吗？
在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影.它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别, 分别在 ...
ts中的interface与type的区别
1.typeof 的类型别名可以用于其他的类型,比如联合类型.元组类型.基本类型,interface 不行. 2.type 的别名不可以多次定义会报错,而 interface 则可以多次定义,会将其 ...
ElasticSearch : Index 和 Type 的区别
对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 type,还是给它新建一个 index?要想回答这个问题,我们必须先理解这两者是怎么实现的. 过去 ...
doc es 中type_ElasticSearch: Index 和 Type 的区别
原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...

nth-child与nth-of-type的区别

nth-child与nth-of-type的区别相关推荐

最新文章

热门文章