当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2023/12/14 编程问答 42 豆豆

生活随笔收集整理的这篇文章主要介绍了 nth-child和nth-of-type的区别小编觉得挺不错的,现在分享给大家,帮大家做个参考.

nth-child定义：(来自MDN)

nth-child总结：

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

nth-of-type总结:

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的区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。