原文::nth-child(odd)與:odd之間的比較

如圖,這里有兩個表格,需要實現的是為每個表格的奇數行添加樣式alt,使其背景顏色變成灰色 使用:odd 結果如圖,兩個表格似乎合並為一個表格,而且此種形式計數是從 開始的。問題先暫放一下,看:nth child 如何 使用nth child odd 結果如圖,兩個表格依舊獨立為兩個表格,而且計數是從 開始的。 這里有兩個不一樣的地方,表格個數不一樣以及計數基數不一樣 表格個數不一樣 要理解表格個數 ...

2016-03-17 23:41 0 3217 推薦指數:

查看詳情

nth-child()用法

nth-child()用法 nth-child(number) 表示第幾個子元素 .div:nth-child(2) /*表示第二個子元素*/.div:nth-child(4) /*表示第四個子元素*/ nth-child(odd)和nth-child(even ...

Fri Feb 25 22:58:00 CST 2022 0 784
nth-of-type與nth-child的區別

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

Wed Apr 17 04:28:00 CST 2019 0 673
理解nth-childnth-of-type

css中的nth-childnth-of-type用於選擇父元素下第n個子元素,但是對於他們的理解卻不夠深入,所以通過這個下面的示例詳細展示一下他們的效果。 一、准備頁面 本次使用的都是.container下的元素,div和p統一編號為1-8,div元素有類node,會再顯示 ...

Fri Nov 05 01:24:00 CST 2021 0 131
css選擇器 nth-child

: 1.2、nth-child(odd) 父元素下的奇數子元素 等同於 nth-child(2n ...

Fri Dec 15 18:50:00 CST 2017 0 4435
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
徹底理解nth-childnth-of-type的區別。

最近又有些天沒寫博客了,主要寫一篇下來,太浪費時間了,其實這不是根本,根本是最近比較忙,忙什么呢?最近發現一個問題覺得學習速度太慢了,時間倒是花的很多,但大部分時間都花在無意義的事情上,所有打算改變政策,目前已經整理出一套規范,正在測試中,好了不扯那么多,看正題。 為什么要寫篇呢,主要 ...

Mon Oct 24 05:20:00 CST 2016 0 10785
CSS3 nth-child的使用,詳解css中nth的作用,以及nth-child的兼容寫法

:nth-child是css3的一個比較常用的選擇器。它用於匹配屬於其父元素中的子元素,不論元素的類型。 它的參數可以是數字、關鍵詞或公式。下面講介紹它的使用方法, nth-child的使用 html結構如下: 只選取第2個元素 選取第2個及之后 ...

Mon May 18 21:05:00 CST 2020 0 1094
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM