現在的位置: 首頁 > web前端 > 正文

CSS選擇器 nth child()和 nth of type()的使用

2020年07月14日 web前端 ⁄ 共 1065字 ⁄ 字號 評論關閉

  今天就講一下css選擇器:nth-child()和:nth-of-type()的使用。


  一、:nth-child()和:nth-of-type()的支持度


  所有主流瀏覽器均支持:nth-child()和:nth-of-type()選擇器,除了IE8及更早的版本。


  二、:nth-child()和:nth-of-type()的一般使用方法


  1、:nth-child(x);選擇第x的元素


  2、:nth-child(x*n)x的n倍元素


  3、:nth-child(n+x);選擇=>x的元素


  4、:nth-child(-n+x)選擇=<x的元素


  5、:nth-child(nx+1);nx-1隔開n*x選取一個


  6、nth-child(odd)/nth-child(even)奇數偶數


  使用的時候請把《*》刪除


  三、:nth-child()和:nth-of-type()的一些不同之處


  :nth-child()—–》


  混合型跳過模式:這個是我自己取得名字。


  意思就是說同一個父級下如果我們選擇了第二個元素p:nth-child(2)。


  但是第二個元素不是p標簽而是其他的標簽,那么選擇的標簽不成立,選擇不了。


  代碼如下:


  <divid="a1">


  <p>CGLweb前端</p>


  <div>CGLweb前端</div>


  <p>CGLweb前端</p>


  </div>


  <styletype="text/css">


  #a1p:nth-child(2){background:#000000


  </style>


  :nth-of-type()—–》


  匹配標簽選擇模式,比如說代碼div:nth-of-type(2n),不考慮其他的標簽,


  先把同級div排列一下,然后2的倍數的時候選擇他。


  <divid="a2">


  <p>p1</p>


  <div>div1</div>


  <p>p2</p>


  <div>div2</div>


  <div>div3</div>


  <p>p3</p>


  <div>div4</div>


  <div>div5</div>


  <div>div6</div>


  </div>


  <styletype="text/css">


  #a2div:nth-of-type(2n){background:#000000;color:#fff;}


  </style>


  總之,:nth-child()和:nth-of-type()給大家簡單的介紹了一些,希望大家多看看。

抱歉!評論已關閉.

奔驰宝马破解版下载 11选5任四复试中5个多少钱 私募基金投资单一标的 北京塞车计划全天计划 湖北快三走势 私募资产配置类基金管理人 江西江西省十一选五前三走势 河内一分彩前二技巧 宁夏11选五走势图前三 韩国快乐8开奖真假 11选5广东 内蒙古快三组合走势图一定牛 全国股票配资平台排名 山西快乐10分走势图25 市场配置资源 北京11选五走势图 盈丰配资