關於css設定第n個元素

2021-09-24 14:21:17 字數 542 閱讀 8142

1、3個元素一行,間距設定

方法一:設定中間元素margin-left,margin-right,獲取第2、5、8、11…元素,找到公式最重要,公式為3n+2(下面會附上公式講解),所以就是

.class:nth-child(3n+2)
方法二:設定每個元素margin-right,然後再找到每一行的最後乙個元素即3的倍數(公式3n+3)元素margin-right:0

.class

.class:nth-child(3n+3)

/*3n也可,反正第0個也沒有*/

提一下另一種方法,跟主題偏離了,但也算個知識點

用flex布局,justify-content: space-between;但不適合元素個數不定,比如第二行只有兩個元素,不能靠左顯示。

公式計算原理

拿上面的3n+2,n就是0,1,2,3,4,5…,計算就是3x0+2 3x1+2,3x2+2依次類推

未完待續…

css 獲取從第n個開始之後的所有元素

具體 如下所示 等待獲取 等待獲取 等待獲取jdxgw 程式設計客棧div 現要獲取box中,除了第乙個之外的其他的div box div nth of type n 2 其中n後jdxgwa面的數字,是幾就是從第幾個開始獲取。例子中從第二個div開始獲取,所以是 n 2 總結以上所述是小編給大家介...

CSS選定第k個元素

doctype html html head title title style type text css 使用first child和last child p first child p last child nth child 引數 比較靈活,注意n表示自然數,從0,1,2,開始 nth ch...

css匹配選擇屬於其父元素的第N個子元素的方法

加入要讓第二個 th 佔table 總寬度的50 複製 如下 程式設計客棧lt style type text css table tr th nth child 2 第乙個 第二個程式設計客棧t 程式設計客棧t 第三個 k uxjvable 定義 nth child n 選擇器匹配屬於其父元素 在...