原文:偽類選擇器 E:nth-child(n)、E:nth-of-type(n)

結構偽類是css 新增的類型選擇器。E:nth child n E:nth of type n 就是其中之二。搞懂了這兩個,基本上跟他倆一家的其他幾個兄弟伙基本上也可以弄懂了。 首先先用文字語言來描述一下這倆: E:nth child n : 選擇父元素下的第n個子元素,並且這第n個子元素的類型為E, 還是語言描述了之后用例子比較好 上面這個例子很簡單,來簡單分析一下樣式表中的span:nth c ...

2017-05-04 20:45 0 1342 推薦指數:

查看詳情

nth-child(n)和nth-of-type(n)的區別

1.官方解釋:   p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。  p:nth-of-type(2) 選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。 2.大白話   p:nth-child ...

Fri Mar 01 06:35:00 CST 2019 0 888
【CSS3】---結構性選擇器nth-child(n)+nth-last-child(n)

結構性選擇器nth-child(n) “:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數,而且可以是整數值(1,2,3,4),也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even),但參數n的起始值始終是 ...

Thu Apr 23 23:29:00 CST 2015 0 3373
虎記:強大的nth-child(n)選擇器玩法

寫在前面的戲: 最近參加了度娘前端IFE的春季班,刷任務,百度真是有營銷頭腦,讓咱們這幫未來的技術狂人為他到處打廣告(我可不去哪),其中做的幾個任務中有幾個以前沒有用到的東西, 也算是有些許收獲(現在做了一半任務哦,萌萌噠),今天就來捋一捋css強大的nth-child(n)選擇器 ...

Fri Mar 18 06:02:00 CST 2016 4 2883
CSS3 選擇器 nth-child

有時候我們在處理多個同樣的<span><.li>等時,其中有一兩個需要與其他兄弟不一樣,這時候我們就需要css3的選擇器 nth-child。下面總結一下幾種選取方式 以下HTML css 共用 效果圖: 1. e ...

Fri Sep 13 00:16:00 CST 2019 0 1190
jQuery 選擇器(:nth-child(n))詳解(zf)

jQuery的:nth-child(n)選擇器用於匹配作為父元素下的第n個(或特定順序的)子元素的元素,將其封裝為jQuery對象並返回。 與該選擇器相對的是:nth-last-child(n)選擇器,用於匹配作為父元素下的倒數第n個(或符合特定倒數順序的)子元素。 注意::nth-child ...

Tue May 28 20:52:00 CST 2019 0 611
一次性分清nth-child(n)和nth-of-type(n)

nth-childnth-of-type都是子代選擇器,他們的區別就是nth-child強制是父元素的第幾個子元素,而nth-of-type要求是同中類型的第幾個元素。 可以看到頁面沒有任何元素變色。原因是該選擇器先找到p元素的父元素body,然后找父元素的第一個子元素,body ...

Tue Jul 09 18:42:00 CST 2019 0 431
nth-of-typenth-child的區別

nth-of-type:    簡單來說nth-of-type會忽略其它標簽的順序而按照標簽自身種類的順序進行篩選,也就是選擇的參照點並不是DOM數,而是自身。下面我們結合具體的例子來了解下。 代碼效果如下圖所示,文本中的第3個p標簽背景顏色發生改變。 nth-child ...

Wed Apr 17 04:28:00 CST 2019 0 673
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM