实战IT培训机构_IT培训班选大学生IT技术培训中心_中公优就业

400-650-7353
您所在的位置：首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】:nth-child()和:nth-of-type()的區(qū)別

【W(wǎng)eb前端基礎(chǔ)知識】:nth-child()和:nth-of-type()的區(qū)別

  • 發(fā)布： Web前端培訓
  • 來源：Web前端干貨資料
  • 2020-09-11 14:59:08
  • 閱讀()
  • 分享
  • 手機端入口

:nth-child和:nth-of-type都是css3的結(jié)構(gòu)偽類選擇器，和他們相關(guān)的還有一堆其他的結(jié)構(gòu)偽類選擇器，如果搞懂了這兩個選擇器的話，相應(yīng)的也能搞懂和他們相關(guān)的其他結(jié)構(gòu)偽類選擇器啦。

這兩個選擇器，可不像我們看起來的那么簡單，他們的作用相近，卻又不完全一樣。

定義

我們先來看下這兩個選擇器的定義：

:nth-child(n) 選擇器匹配父元素中的第 n 個子元素，元素類型沒有限制。

:nth-of-type(n)選擇器匹配同類型中的第n個同級兄弟元素。

n可以是一個數(shù)字，一個關(guān)鍵字，或者一個公式。

寫個例子看下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>:nth-child()和:nth-of-type()的區(qū)別</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()的區(qū)別</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，但是效果卻不同。那么到底這兩個選擇器是什么意思呢?

分析：

我們再來看下結(jié)構(gòu)：

.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這個元素：

文章“【W(wǎng)eb前端基礎(chǔ)知識】:nth-child()和:nth-of-type()的區(qū)別”已幫助 人

>>本文地址：http://www.jecan.cn/zhuanye/2020/55049.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有，未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作？

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發(fā)智能機器人
 

快速通道fast track

近期開班時間TIME

主站蜘蛛池模板： 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 螺旋丝杆升降机-SWL蜗轮-滚珠丝杆升降机厂家-山东明泰传动机械有限公司 | 威海防火彩钢板,威海岩棉复合板,威海彩钢瓦-文登区九龙岩棉复合板厂 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | 高压直流电源_特种变压器_变压器铁芯-希恩变压器定制厂家 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | 工作心得_读书心得_学习心得_找心得体会范文就上学道文库 | 陕西高职单招-陕西高职分类考试网 | 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 拉力测试机|材料拉伸试验机|电子拉力机价格|万能试验机厂家|苏州皖仪实验仪器有限公司 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 电机铸铝配件_汽车压铸铝合金件_发动机压铸件_青岛颖圣赫机械有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 高通量组织研磨仪-多样品组织研磨仪-全自动组织研磨仪-研磨者科技（广州）有限公司 | 立式矫直机_卧式矫直机-无锡金矫机械制造有限公司| 智慧物联网行业一站式解决方案提供商-北京东成基业 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 菏泽商标注册_菏泽版权登记_商标申请代理_菏泽商标注册去哪里 | 壹作文_中小学生优秀满分作文大全 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 卡诺亚轻高定官网_卧室系统_整家定制_定制家居_高端定制_全屋定制加盟_定制家具加盟_定制衣柜加盟 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 对辊破碎机-液压双辊式,强力双齿辊,四辊破碎机价格_巩义市金联机械设备生产厂家 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 首页 - 张店继勇软件开发工作室 兰州UPS电源,兰州山特UPS-兰州万胜商贸 | 移动机器人产业联盟官网| 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 葡萄酒灌装机-食用油灌装机-液体肥灌装设备厂家_青州惠联灌装机械 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 深圳办公室装修-写字楼装修设计-深圳标榜装饰公司 | 中图网(原中国图书网)：网上书店，尾货特色书店，30万种特价书低至2折！ | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 |