nth-child定义：(来自MDN)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。

例子一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-child(2n+1){background-color: pink;}</style>
</head>
<body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>5</h1><h1>6</h1><h1>7</h1><h1>8</h1>
</body>
</html>

效果图：

例子二：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-child(2n+1){background-color: pink;}</style>
</head>
<body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><div>5</div><h1>6</h1><h1>7</h1><h1>8</h1>
</body>
</html>

效果图：

nth-child总结：

通过以上两个例子可以看出，nth-child是将当前的所有兄弟元素进行排序，从1开始，然后根据条件改变相应效果。但是即使兄弟元素在选中的位置，比如例子二中<div>5</div>是在奇数行，但是效果照样不会生效，只有h1才会生效。

nth-of-type定义:(来自MDN)

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。

例子一：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-of-type(2n+1){background-color: pink;}</style>
</head>
<body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>5</h1><h1>6</h1><h1>7</h1><h1>8</h1>
</body>
</html>

效果图：

例子二：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1:nth-of-type(2n+1){background-color: pink;}</style>
</head>
<body><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><div>5</div><h1>6</h1><h1>7</h1><h1>8</h1>
</body>
</html>

效果图：

nth-of-type总结:

nth-of-type是只按同一个标签进行排序，也就是说排序只对同一个标签起作用。例如例子二中的5的标签是div，所以并不在排序范围内。

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定义：(来自MDN)

nth-child总结：

nth-of-type定义:(来自MDN)

nth-of-type总结:

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

最新文章

热门文章