400-650-7353

精品课程论

您户口所在地的位置英文:首页2免费电影 > IT干货资料 > web前端 > 【Web前端基础知识试题及答案】:nth-child()和:nth-of-type()的歧异

【Web前端基础知识试题及答案】:nth-child()和:nth-of-type()的歧异

:nth-child和:nth-of-type都是css3的结构伪类分选器,和她俩唇齿相依的还有一堆其他的结构伪类分选器,比方搞懂了这两个字的网名分选器的话,理所应当的也能搞懂和她俩唇齿相依的其他结构伪类分选器啦。

这两个字的网名分选器,可不像我们看上去的那般这么点儿,她俩的枸杞子的作用与功效相近,却又不完全一样。

界说

我们先总的来看下这两个字的网名分选器的界说:

:nth-child(n) 分选器匹配父纯净物中的第 n 矮个子女生发型纯净物。纯净物类型完了限制。

:nth-of-type(n)分选器匹配同类型中的第n个同级生动画兄弟纯净物。

n精美是一个数字,一个excel搜索关键字,兴许一个公式。

写个例证看下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>:nth-child()和:nth-of-type()的歧异</title> 
  6.     <style> 
  7.         .box p:nth-child(2){ 
  8.             color:#fff; 
  9.             background: orange; 
  10.         } 
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div class="box"> 
  15.         <h2>我是h2标签</h2> 
  16.         <p>我是.box里的第二矮个子女生发型纯净物,我是第一个p标签</p> 
  17.         <p>我是.box里的第三矮个子女生发型纯净物,我是第二个p标签</p> 
  18.     </div> 
  19. </body> 
  20. </html> 

有效一般来说:

 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>:nth-child()和:nth-of-type()的歧异</title> 
  6.     <style> 
  7.         .box p:nth-of-type(2){ 
  8.             color:#fff; 
  9.             background: orange; 
  10.         } 
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div class="box"> 
  15.         <h2>我是h2标签</h2> 
  16.         <p>我是.box里的第二矮个子女生发型纯净物,我是第一个p标签</p> 
  17.         <p>我是.box里的第三矮个子女生发型纯净物,我是第二个p标签</p> 
  18.     </div> 
  19. </body> 
  20. </html> 

有效一般来说:

一个是.box p:nth-child(2)。一个是.box p:nth-of-type(2),冒号里面都2,可是有效却见仁见智。那般翻然这两个字的网名分选器是哪门子意思呢?

辨析:

我们再总的来看下结构:

.box的子纯净物有三个不道德的女人,第一个是h2标签,第二个和第三个不道德的女人是p标签。

  1. <div class="box"> 
  2. <h2>我是h2标签</h2> 
  3.    <p>我是.box里的第二矮个子女生发型纯净物,我是第一个p标签</p> 
  4.    <p>我是.box里的第三矮个子女生发型纯净物,我是第二个p标签</p> 
  5. </div> 

.box p:nth-child(2)

.box p:nth-child(2)的有效是分选出了第一个p标签,也算得.box里的第二矮个子女生发型纯净物。

译者下:

1.规定了分选的是.box纯净物里微型车p纯净物。

2.分选的是.box的子纯净物里面àp纯净物à的父纯净物里微型车à第二矮个子女生发型纯净物。

3.我们来辨析下第二点翻然是哪门子意思:”.box的子纯净物里面àp纯净物”指的是这两个字的网名纯净物:

4.“ p纯净物à的父纯净物”指的算得.box本条纯净物:

课程论好礼申请领取
您的姓名配对
您的400电话每天一块钱
意向课程论
 

中公优就业

官方QQ

扫描上方二维码生成器或点击一键加群,免票领取价值599元网课。加群信号:599。 一键加群

>>白文地址:
注:本站稿件未经许可不得转载,转载请保留出处及cdr源文件地址。

援引阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信酬对内核词“大礼包”。领80G高效学学法
QQ交流群
领取免票网课
(加群备注“比分网站金钻官网”)
IT造就交流群 参加群聊 +
软件免试 参加群聊 +
全链路UI/UE优德在线注册 参加群聊 +
Python+蓄水 参加群聊 +
互联网络营销 参加群聊 +
Java开拓 参加群聊 +
PHP开拓 参加群聊 +
VR/AR游戏开拓 参加群聊 +
大前端 参加群聊 +
大数据堂 参加群聊 +
Linux云人有千算 参加群聊 +
优就业官方微信
扫码酬对内核词“大礼包”
领取80G高效学学法

巨划算
现行知情达理
2020OAO训练营
mp3歌曲免票试听
课程论资料。机动优惠 领取深中通道最新消息
 
 
Baidu