ul li:nth-child(3n+3){
上面這段**如何工作的呢.
括號中引數 可以接收兩個關鍵字, even odd ;
even 表示只選擇 偶數字的元素 第2 4 6 8 10.....項元素
odd 表示只選擇 奇數字的元素 第1 3 5 7 9.....項元素
也可以接收乙個表示式
最簡單的表示式 僅有乙個數字 就足夠 如果你傳入乙個數字 2 那麼他僅僅選中第二個元素
那麼 當表示式是 3n+3 的時候,他是如何工作的呢.
其實 n 是乙個從 0 開始的 正整數陣列 [0,1,2,3,4,5....]
所以只要把這個陣列裡的每一項帶入這個表示式計算一下
3*0 +3 =3
3*1 +3 = 6
3*2 +3 =9
可以看出 這個表示式選中的是 項數為 3 6 9 12..... 的元素
小練習 如果你要選中 1 10 11 21 項的 元素應該怎麼做呢.
根據上面的 例子 我們可以推論出
表示式 應該是這樣的
10*0 +1 =1
10*1 +1 =11
10*2 +1 =21
所以最終的表示式應該是 (10n+1)
有用的 nth child秘方
當我想要完美的使用 nth child或者 nth of type的時候有點兒頭暈。你越理解它們，就能寫出越好的css規則！在這些簡單的 秘方 實際上是表示式 中我將重複的使用乙個簡單的列表並隨即選擇數字。但是很明顯很容易改變它們以獲得類似的選擇器。要選擇第乙個元素，你可以使用 first chil...
nth of type和nth child的區別
nth of type n 選擇器匹配屬於父元素的特定型別的第 n 個子元素的每個元素.nth child n 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。html 這是標題h1 第乙個段落。p 第二個段落。p 第三個段落。p 第四個段落。p 第五個段落。p a css p nth o...
nth of type與nth child的區別
今天在看bootstrap教程的時候，發現教程上提到了乙個知識點是之前沒有注意過的，那便是nth of type和nth child。這兩個都是css3中的屬性。nth of child 它的屬性就是按照所有型別標籤的所謂整體佇列進行排序篩選，也就是說不論你是h1，span還是p標籤，使用這個屬性你...