搜索
首页web前端css教程CSS nth-of-type和nth-child的区别是什么?

区别:两种匹配的元素不同,“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素,元素类型是有限制的;而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素,元素类型是没有限制的。

CSS nth-of-type和nth-child的区别是什么?

(推荐教程:CSS视频教程

1、:nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n 可以是数字、关键词或公式。

2、:nth-of-type(n)
:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素,元素类型没有限制;n可以是数字、关键词或公式。

3、具体区别

首先看代码

1.png

p:nth-of-type(7) 选择的 p元素所在的父元素下的第7个P元素 即:<p>第7个p</p>

p:nth-child(6) 选择的 p元素所在的父元素下的第6个子元素,且该元素是P元素 即:<p>第5个p</p>

结果

2.png

4、odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
odd选择奇数 even选择偶数

  1. :nth-child(odd)

3.png

上述例子p:nth-child(odd):选择的是P的父级元素下的,奇数元素且该元素是P元素, 所以是 <p>第二个段落。</p><p>第四个段落。</p> ( p:nth-child(n) n=3和 n=5)

  1. :nth-child(even)

4.png -上述例子p:nth-child(even):选择的是P的父级元素下的,偶数元素且该元素是P元素 ,所以是 <p>第一个段落。</p><p>第三个段落。</p><p>第五个段落。</p> ( p:nth-child(n) n=2和 n=4 和 n=6)

  1. :nth-of-type(odd)

    5.png
    -上述例子p:nth-of-type(odd):选择的是P的父级元素下的,奇数的P元素 ,所以是 <p>第一个段落。</p><p>第三个段落。</p><p>第五个段落。</p> ( p:nth-of-type(odd) n=1和 n=3 和 n=5)

  2. :nth-of-type(even)

    6.png
    -上述例子p:nth-of-type(even):选择的是P的父级元素下的,偶数的P元素 ,所以是 <p>第二个段落。</p><p>第四个段落。</p> ( p:nth-of-type(even) n=2和 n=4 )

5、 :nth-of-type(an+b) 和 :nth-of-type(an+b ) 规则和上述阐述的规则一样
a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
比如: :nth-of-type( 2n+1) 就是第1,3,5 个P元素

7.png

更多编程相关知识,请访问:编程入门!!

以上是CSS nth-of-type和nth-child的区别是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
滑动页脚滑动页脚Apr 09, 2025 am 11:50 AM

刚刚推出了一个引人入胜的新网站。标语:Big Tech正在看着您。我们正在看大型技术。上升的出色工作。这

喜欢的页面喜欢的页面Apr 09, 2025 am 11:47 AM

前几天,我发布了有关在JavaScript中解析RSS提要的内容。我还发布了有关RSS设置的信息,讨论了Feedbin的核心。

重新创建Codepen Gutenberg嵌入块以进行理智。重新创建Codepen Gutenberg嵌入块以进行理智。Apr 09, 2025 am 11:43 AM

学习如何通过Chris Coyier实施WordPress的Gutenberg编辑器来创建一个自定义Codepen块,并为Sanity Studio提供预览。

如何使用CSS制作线路图如何使用CSS制作线路图Apr 09, 2025 am 11:36 AM

线,条和饼图是仪表板的面包和黄油,是任何数据可视化工具包的基本组成部分。当然,您可以使用SVG

编程SASS创建可访问的颜色组合编程SASS创建可访问的颜色组合Apr 09, 2025 am 11:30 AM

我们一直在寻求使网络更容易访问。颜色对比只是数学,因此Sass可以帮助涵盖设计师可能错过的边缘案例。

我们如何创建一个在SVG中生成格子呢模式的静态站点我们如何创建一个在SVG中生成格子呢模式的静态站点Apr 09, 2025 am 11:29 AM

格子呢是一块图案布,通常与苏格兰有关,尤其是他们时尚的苏格兰语。在Tar​​tanify.com上,我们收集了5,000多个格子呢

PHP模板的后续行动PHP模板的后续行动Apr 09, 2025 am 11:14 AM

不久前,我仅以PHP(基本上是Heredoc语法)发布了有关PHP模板的信息。我从字面上使用该技术来进行某种超级基础

使用Bootstrap组件创建模态图像库使用Bootstrap组件创建模态图像库Apr 09, 2025 am 11:10 AM

您是否曾经在网页上单击图像,该图像通过导航打开图像的较大版本以查看其他照片?

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中