CSS: nth-child()選擇前幾個元素
前言
渲染列表時,需要設定前3個元素的margin-top值與其他的不同。
使用
:nth-child(-n+3){
margin-top: 12px;
}
擴充套件
-
選擇前幾個元素
/*【負方向範圍】選擇第1個到第6個 */ :nth-child(-n+6){}
- 從第幾個開始選擇
/*【正方向範圍】選擇從第6個開始的 */ :nth-child(n+6){}
-
兩者結合使用,可以限制選擇某一個範圍
/*【限制範圍】選擇第6個到第9個,取兩者的交集【感謝小夥伴的糾正~】 */ :nth-child(-n+9):nth-child(n+6){}
參考
總結
看別人的部落格可以解決問題,但是自己再簡單地記錄下來會更深刻。慢慢積累,各個擊破。
如果你有什麼疑問或想法,歡迎留言評論,或者掃描下方二維碼,與我取得聯絡~ (記得備註:CSDN喔~)
相關推薦
CSS: nth-child()選擇前幾個元素
前言 渲染列表時,需要設定前3個元素的margin-top值與其他的不同。 使用 :nth-child(-n+3){ margin-top: 12px; } 擴充套件 選擇前幾個元素 /*【負方向範圍】選擇第1個到第6個 */ :nth-chil
用css3選擇器給你要的第幾個元素新增不同樣式方法
很多時候,我們寫網頁樣式時候會遇到如下面圖這種的, 第4個li下面有一行虛線什麼的,這樣迴圈,那麼,如何很方便的用css實現呢! 我們寫的html程式碼 例項如下: <ul class="list"> <li><a href="#"&
jquery獲取同級緊鄰的前幾個和後幾個元素
jquery只提供prev()、prevAll()/next()、nextAll()以獲取元素緊鄰的前面/後面同輩元素的元素集合,並不能直接實現標題中的需求。但jquery 提供了slice(start,end)方法以實現“選取一個匹配的子集”,這個方法引數
jsp中怎麼利用css 只顯示內容的前幾個字元
在產品說明這裡,文字太多不得不換行,這樣佈局很醜,而且佈局也亂了,怎麼控制顯示說明內容的長度呢? 只要利用css設定如下內容就可以了 text-overflow:ellipsis; white-space:nowrap; overflow:hidden;&n
python筆記10-切片(從list或字符串中取幾個元素)
-1 下標 功能 切片 name 字符 list python 筆記 name1 = ‘zcl,pyzyz‘names = [‘zcl‘,‘py‘,‘zyz‘]#切片的意思就是從list裏面或者字符串裏面取幾個元素#切片操作對字符串也是完全適用的# print(names[
一個時間插件是如何做到前幾個月和後個幾月的設置
我們 minute -1 mat code 搬運工 urn repl begin 一如既往的,我們只是代碼的搬運工,代碼搬運工,搬的多了自然也就會了。 代碼: //首先在date原型上擴展一個自定義時間解析方法 Date.prototype.Format_ = funct
CSS3的nth-child選擇器實現斑馬線顯示
所在 通過 設置 child bsp 關鍵字 span 選擇 nbsp nth-child選擇器:通過選擇一個一個標簽來定義其父標簽範圍內所有同類表現的屬性。 例如: div:nth-child(2) { background:#ffffff; } 可以設置該div所在
jQuery判斷當前元素是第幾個元素&獲取第N個元素
jquer ont query font href 點擊 我們 div fun jQuery判斷當前元素是第幾個元素&獲取第N個元素 假設有下面這樣一段HTML代碼: <ul> <li>jQuery判斷當前元素是第幾個元素示例&
take - 數組切片,返回前N個元素的數組
clas 返回 spa size opera fun 一個 bsp col 創建一個數組切片,從arr數組的起始元素開始提取n個元素。 使用 Array.slice() 創建一個數組包含第一個元素開始,到 n 個元素結束的數組。 const take = (arr, n =
獲取當前時間的前幾個月的星期起始結束時間
pan temp turn RR 每天 () === for println 每天學習一點點 編程PDF電子書、視頻教程免費下載:http://www.shitanlife.com/code 實現的效果打印出來如下: 第4月第1周----------2018-4-2=
Python3基礎 file read 讀取txt文件的前幾個字符
str http google ash eps 解釋 踏實 類型 lan ? python : 3.7.0 OS : Ubuntu 18.04.1 LTS
python得到一個數組前p個元素,並得到索引
環境 二維 遇到 cnblogs args dex 多維數組 得到 tle 我自己的思路,第一步把矩陣拼接成一維數組,然後用argsort得到排序,然後把一維坐標換算成二維的 numpy 矩陣形狀調整:拉伸、變成一維數組: #將多維數組變成 1維數組 a=b.ravel()
C++:將一個數組的前m個元素和後n-m個元素整體互換位置
笨方法 >_< #include <iostream> using namespace std; int main() { int n,m,i,j; int a[100]; cout<<"請輸入要建立陣列的長度(不能超過100)
Python陣列取一個或幾個元素值的例子,word[0:2],從第0個字元到第2個字元(不包括第2個字元)
https://docs.python.org/3/tutorial/introduction.html#strings >>> word = 'Python' >>> word[0] # character in position 0 'P'
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子 解決方案 有種場景:頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時,頁面 A 、B、C 的 onUnloa
【演算法】反轉佇列前K個元素
反轉佇列前K個元素 想到佇列的反轉那肯定首先想到的就是堆疊(同理堆疊反轉也可以利用佇列) 有一個辦法我們可以將K個元素入棧,然後可以另一個佇列將剩下的元素放入,隨後我們首先將棧元素迴歸原來的佇列,最後將
遍歷數組裡,每幾個元素一組的所有可能 (lua)
local arr={1,2,3,4,5,6,7,8,9,10} local repcount =#arr local arr_count = 4 --每幾個元素一組 local rep_cardindex={} --假如4個元素,1234個元素對應arr數組裡
CSS3——:nth-child選擇器基本用法簡述
注:n 是從1開始的 :nth-child 是 CSS3 提供的一個好用的選擇器,因為在專案中經常用到,所以簡單總結了它的常用方法 下面示例程式碼截圖用的是同一個例子,p元素的父元素都是body p
css nth-child 的應用
最近改視訊監控頁面,由於視窗比較多,以前是通過計算視窗大小位置來處理頁面佈局的,其實還是比較麻煩,而且偶爾會有頁面位置錯亂的現象,雖然只是及其偶爾的現象,但總歸是不好。 計算視窗位置的程式碼: /*監控視窗高度自動*/ web.gridHeight = function (num) {
初試css3的nth-child選擇器
最近在看程式碼模板時遇到了nth-child,覺得挺好玩就查了一下。nth-child:規定屬於其父元素的子元素的css樣式。引數可以是:數字+n如下圖意思為main-timeline的子元素,下標為2的倍數的所有timeline的padding:0 0 0 50px;引數還