nth-of-type(n)
时间: 2024-03-02 17:50:59 浏览: 20
:nth-of-type(n) 是 CSS3 中的一个伪类选择器,用于选择同类型兄弟元素中的第 n 个元素。具体来说,该选择器会选中其父元素内类型相同的第 n 个子元素。例如,以下 CSS 代码会将一个 ul 元素下的第二个 li 元素的文本变为红色:
```
ul li:nth-of-type(2) {
color: red;
}
```
注意,该选择器会选择与当前元素相同的元素,即如果当前元素是一个 p 元素,则 :nth-of-type(n) 会选择该 p 元素的同级元素中的第 n 个 p 元素。
相关问题
nth-child和nth-of-type区别
nth-child和nth-of-type是CSS中的伪类选择器,用于选择元素的特定位置。
nth-child选择器选取父元素下的第n个子元素,无论其类型是什么。例如,nth-child(2)选取父元素下的第二个子元素。
nth-of-type选择器选取父元素下特定类型的第n个子元素。例如,nth-of-type(2)选取父元素下第二个与指定类型相同的子元素。
区别:
1. 对于nth-child选择器,它会选择父元素下的所有子元素,并根据位置进行筛选。而nth-of-type选择器只会选择与指定类型相同的子元素。
2. 如果父元素下的子元素中有不同类型的元素,nth-child选择器可能会选择到不同类型的元素,而nth-of-type选择器只会选择指定类型的元素。
3. 当使用nth-child选择器时,如果指定的位置超过了父元素下子元素的数量,将不会匹配任何元素。而nth-of-type选择器只会计算指定类型的子元素。
4. nth-child选择器和nth-of-type选择器都可以使用表达式来选择特定位置的子元素,例如:nth-child(2n+1)表示选择奇数位置的子元素。
nth-child(n)和nth-of-type
nth-child(n)和nth-of-type(n)是CSS中两个常用的伪类选择器,它们可以选择父元素中的特定子元素。
nth-child(n)表示选中父元素下的第n个子元素,无论它是什么类型的元素。例如,nth-child(2)将选中父元素下的第二个子元素。
而nth-of-type(n)表示选中父元素下特定类型的第n个子元素。例如,nth-of-type(2)将选中父元素下第二个与其同类型的子元素。如果父元素下没有与其同类型的子元素,则不会选中任何元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)