nth child 乙個CSS樣式選擇器

2021-05-02 19:29:56 字數 1164 閱讀 8205

:nth-child(2n)是css的乙個選擇器,對於在dom樹中有an+b-1個兄弟節點的元素,通過:nth-child可以選擇哪些元素應用樣式。這些兄弟節點中編號從1開始。

語法:element:nth-child(an + b)

表示element對應的元素中,第an+b(n可以使任意整數)個元素應用該css樣式;

一些簡單的例子:

tr:nth-child(2n+1):表示表中奇數行將顯示這個定義的樣式

tr:nth-child(odd)

表示表中奇數行將顯示這個定義的樣式tr:nth-child(2n):表示表中偶數行將顯示這個定義的樣式

tr:nth-child(even)

表示表中偶數行將顯示這個定義的樣式

示例

css**

span:nth-child(2n+1) 

html**

1. < div >    

2.     < span > this span is limed!     

3.     < span > this span is not. :(     

4.      < span > but this one is!     

5.      < span > sadly, this one is not...     

6.     

this span is limed!

this span is not. :(

but this one is!

sadly, this one is not...

結果將是:

this span is limed!

this span is not. :(

but this one is!

sadly, this one is not...

同級css使用乙個樣式 純CSS樣式寫乙個內凹圓

廢話不多說,直接上效果圖!這是html 單元管理 車位管理 商鋪管理 這是css 內凹圓 property left list list one list one before list one after list one after,list one before list one div be...

同級css使用乙個樣式 CSS 核心樣式

css核心樣式 粗細font weight作用 設定文字是否加粗顯示 屬性名 font weight,屬於font屬性的乙個單 屬性 屬性值有兩種方式 單詞型別 數字型別 單詞型別 數字型別100 900之間的整百數字 數字越大,文字顯示越粗 其中400等價於normal,700等價於bold 字型...

僅使用HTML元素通過CSS樣式製作乙個小三角

製作小三角有兩種常用的方式,1 是css3種的方法,通過旋轉乙個div元素45度,然後定位到外部div的某一邊,把多餘的用overflow hidden 遮住,來獲取乙個三角形,但是這種方法相容性不是很好,而且之前的瀏覽器也沒有旋轉屬性,2 通過邊框屬性,來製作小三角.我們可以看到,邊框和邊框之間是...