nth-of-type和nth-child的区别
2018-06-24 00:20:57来源：未知 阅读 ()
看CSS3时发现了一个nth-of-type选择器，发现平时基本没见过用，就研究了一下，w3c是这样说明的：
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
看起来和nth-child很像
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
那么两者区别到底是什么？试验一下吧。
HTML：
<div class="box"> box： <p>我是p1</p> <p>我是p2</p> </div> <div class="pox"> pox： <p>我是p1</p> <p>我是p2</p> </div>
CSS：
<style> .box{ margin: 100px; float: left; } .pox{ margin: 100px 0 0 60px; float: left; } .pox p:nth-child(1){ color: red; } .box p:nth-of-type(1){ color: red; } </style>
结果貌似相同：
这里稍微做一下改变HTML：
<div class="box"> box： <div>我是div1</div> <p>我是p1</p> <div>我是div2</div> <p>我是p2</p> </div> <div class="pox"> pox： <div>我是div</div> <p>我是p1</p> <div>我是div2</div> <p>我是p2</p> </div>
结果：
这里发现nth-child没有起作用，这是为什么呢？
其实p:nth-of-type(n)是指父元素下第n个p元素， 而p:nth-child(n)是指父元素下第n个元素且这个元素为p，若不是，则选择失败。
这里的pox下的第一个子元素是div而不是p，所以选择失败。若想p1变红，p1是pox下的第二个子元素应该选择nth-child(2)，应该改为：
.pox p:nth-child(2){ color: red; }
结果：
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：HTML 表单和验证事件
下一篇：php学习第一天之HTML篇
- HTML 5的革新——语义化标签section和article的区别 2020-06-01
- 前端开发和后端开发的区别？这两者哪个更累？ 2020-05-22
- XHTML?它与 HTML的区别？如何转换 2020-03-31
- CSS3--3种隐藏元素方法的区别 2020-03-20
- HTML5与HTML4的区别 2020-01-19
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
