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

:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于：

- :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。
- :nth-of-type(n)选择器选取的是父元素下第n个与该元素类型相同的子元素。

举个例子，假设有如下HTML结构：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
</ul>

如果我们想选择第2个列表项，可以使用以下两种方式：

/* 使用:nth-child */
li:nth-child(2) {
  color: red;
}

/* 使用:nth-of-type */
li:nth-of-type(2) {
  color: blue;
}

在上面的例子中，使用:nth-child(2)会选择到第2个子元素，也就是列表项2，而使用:nth-of-type(2)会选择到第2个与该元素类型相同的子元素，也就是同样是列表项的第2个子元素，也就是列表项2。

相关问题

css :nth-child()

:nth-child() 是 CSS 选择器中的一个伪类，用于选取父元素下的特定位置的子元素。

:nth-child(n) 选择器会选取每个父元素下的第 n 个子元素。其中 n 可以是一个具体的数字、关键字（如 even 或 odd），或者一个公式（如 2n+1）。

例如，如果想选择父元素下的第二个子元素，可以使用 :nth-child(2)：

.parent div:nth-child(2) {
  /* 样式 */
}

这样就会选中父元素下的第二个 div 元素，并对其应用样式。

除了 :nth-child()，还有其他类似的伪类选择器，如 :nth-of-type() 和 :nth-last-child()，它们具有类似的功能，但选择子元素的方式略有不同。

希望这个解答对你有帮助！如果你有更多问题，请继续提问。

:not(:nth-child(2n))

:not(:nth-child(2n))表示选择不是偶数位置的元素。
具体来说，它用于选择父元素下所有不是偶数位置的子元素。这个选择器可以用来设置样式或者选择特定的元素。使用这个选择器，可以通过排除偶数位置的元素来选择奇数位置的元素。
例如，如果我们有一个父元素下有5个子元素的列表，使用:not(:nth-child(2n))选择器将会选择第1、第3和第5个子元素，即奇数位置的子元素。

总结：
:not(:nth-child(2n))选择器用于选择不是偶数位置的元素，即奇数位置的元素。这个选择器可以用于设置样式或者选择特定的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [css nth-child_比较CSS伪类：nth-​​child与nth-of-type](https://blog.csdn.net/cukw6666/article/details/107983459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]