JS——nth-child和nth-of-type的区别以及nth-of-type下的坑

`CSS3:nth-child()`选择器

:nth-child(n)选择器匹配属于其父元素的第n个子元素，无论元素的类型

<!DOCTYPE html>
<html><head><style>/* 选择的是p元素的父元素下的第二个子元素（无论类型）的每个p的背景色为red */p:nth-child(2) {background: red;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>

实例1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<!DOCTYPE html>
<html><head><style>/* 选择的是p元素其父元素下所有的基数元素（无论类型）下p的样式 */p:nth-child(odd) {background: #ff0000;}/* 选择的是p元素其父元素下所有的偶数元素（无论类型）下p的样式 */p:nth-child(even) {background: #0000ff;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>

实例2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html><head><style>/* 选择的是p元素其父元素下所有子元素小标为3倍的p元素：0、3、6 */p:nth-child(3n+0) {background: #ff0000;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p><p>第六个段落。</p><p>第七个段落。</p><p>第八个段落。</p><p>第九个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>

`CSS3:nth-of-type()`选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

<!DOCTYPE html>
<html><head><style>/* 选择的是p元素的父元素下的第二个子元素（必须为p元素）的每个p的背景色为red */p:nth-of-type(2) {background: red;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>

实例1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

<!DOCTYPE html>
<html><head><style>p:nth-of-type(odd) {background: #ff0000;}p:nth-of-type(even) {background: #0000ff;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p></body></html>

实例2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html><head><style>p:nth-of-type(3n+0) {background: #ff0000;}</style>
</head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p><p>第六个段落。</p><p>第七个段落。</p><p>第八个段落。</p><p>第九个段落。</p></body></html>

使用 `nth-of-type`选择类名下的坑

如果是 .class:nth-of-type(n)所选出的html元素必须同时符合以下条件：

类属性中包含 class
包含该属性的元素必须是其父元素下子元素的第n个

<!DOCTYPE html>
<html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(1) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style>
</head><body><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></div><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果图：

原因：.ems:nth-last-of-type(1)选择的是含有 ems类名的元素ul，但由于该ul并不是同级别下ul的最后一个（含有rems类名的ul才是最后一个）。所以这句话并不对第二个ul生效。

对此，我们有两种解决方式：

方式一、使含有`ems`类名的标签作为同级别元素下的最后一个（推荐）

可对于两个含有ems的ul元素使用div进行包裹

<!DOCTYPE html>
<html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(1) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style>
</head><body><!-- 在此添加div，使得这两个含有ems类名的ul元素包括在该div下 --><div><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><!-- 因而该ul则可作为同级别下ul元素的最后一个 --><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></div><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果图：

方式二、设置其真实的n值（不推荐）

对于该场景下，只需要把 .ems:nth-last-of-type(1) 改为 ems:nth-last-of-type(2)即可，因为含有ems类名的第二个ul标签其实是作为同级同类型标签下的倒数第二个

<!DOCTYPE html>
<html><head><style>html {font-size: 16px;}.ems:nth-last-of-type(2) li {font-size: 1.3em;}.rems li {font-size: 1.3rem;}</style>
</head><body><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="ems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul><ul class="rems"><li>One</li><li>Two</li><li>Three<ul><li>Three A</li><li>Three B<ul><li>Three B 2</li></ul></li></ul></li></ul></body></html>

效果图：

参考：https://blog.csdn.net/tinyleaf/article/details/81627782