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

 时间:2024-10-13 14:57:35

1、nth-child:以数字1开桌薜兀变头,按顺序查找标签,如果标签为div标签,则更改样式;nth-of-type:以数字1开头,按div标签查找标签。

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

2、运行结果如图所示。

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

3、在div标签之间插入p标签。

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

4、运行结果如图所示。nth-child按顺序查找第4个标签,而第四个标签刚好为div标签,所以更改样式。nth-of-type按div标签查找第4个div标签。

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

5、在div标签之间再次插入p标签。

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

6、运行结果如图所示。因为第四个标签是p标签,而不是div标签,所以nth-child样式不起作用。

nth-child和nth-of-type的区别
  • phpStudy学习之 如何用Mysqlfront 管理数据库
  • Sublime Text 添加文件图标
  • javascript(js)中怎么获取下拉框option的值?
  • textarea中设置下划线并且背景透明
  • UML网络教学系统建模一
  • 热门搜索
    陌是什么意思 开工大吉祝福语 百人斩是什么意思 纳差是什么意思啊 金牛男和什么座最配 拜读是什么意思 婚礼策划师要学什么 什么走龙蛇 祝福公司的祝福语 ipo的意思