CSS裡面能用odd嗎
May 18, 2022 pm 06:40 PMCSS裡面能用odd。在CSS中,odd可以在偽類選擇器中作為關鍵字選取指定元素,常作為「:nth-child()」選擇器的參數,用於選取父元素中奇數行的指定子元素,語法「指定子元素:nth-child(odd){//css樣式}」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS裡面能用odd。
odd的意思為“奇數”,在CSS中,可以在偽類選擇器中作為關鍵字選取指定元素。
odd常與「:nth-child(n)」選擇器搭配使用,作為此選擇器的參數,用於選取父元素中奇數行的指定子元素
1 |
|
說明:相對於odd,還有一個關鍵字even(偶數),和「:nth-child(n)」選擇器搭配使用,可選取父元素中偶數行的指定子元素
範例:實作表格的隔行變色
即奇數行一個顏色,偶數行一個顏色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
擴充知識:
:nth-child(n)
選擇器符合父元素中的第n個子元素。參數是元素的索引。索引從1開始。
n 可以是一個數字,一個關鍵字,或一個公式。
:nth-child 是CSS3 提供的一個好用的選擇器,因為在專案中常用到,所以簡單總結了它的常用方法,下面範例程式碼截圖用的是同一個例子,p元素的父元素都是body
p:nth-child(2)
表示為第2個p元素加上背景色, p:nth-child(3)是第3個p元素,依此類推
p:nth-child(2)
承接上面的範例,如果這裡的p元素前面還有其它元素,結果如下圖,段落1被添加背景色,而不是上面範例的段落2被添加背景色,
#因為這裡的p:nth-child(1)為h1元素,,所以p:nth-child(2)才為p元素
p:nth-child (3n)
表示給3的倍數的p元素加上背景色,2n就是2的倍數,4n就是4的倍數,以此類推
p:nth-child(odd)
表示為所有奇數p元素加入背景色
p:nth-child(even)
表示為所有偶數p元素添加背景色
使用公式(an b),描述:表示週期的長度,n 是計數器(從0 開始),b 是偏移值
註:公式裡的n,不區分大小寫
#p:nth-child(2n 1)
可以簡單理解為等同於p:nth-child(odd)
p:nth-child(2n 0)
以上是CSS裡面能用odd嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)