技術問答
技術文章
iT 徵才
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
第 11 屆 iThome 鐵人賽
DAY
27
1
自我挑戰組
CSS 大全(第四版)閱讀筆記
系列 第
27
篇
day27【主題六:選擇器】筆記2
11th鐵人賽
Amy
2019-09-28 09:22:37
705 瀏覽
分享至
一、選擇每間隔n個元素,:nth-child()
:nth-child(1) 相當於 :first-child
可使用an+b、an-b,兩種代數運算式
實務上常用於清除列圖文列表、面板清單的浮動,n等於一列要的個數 .class li:nth-child(3n+1){clear:left}
注意!n是從0開始,但是所有元素都是從1開始數
:nth-child(2n)表示所有偶數項子代元素(even)
:nth-child(2n+1)、:nth-child(2n-1)表示所有奇數項子代元素(odd)
:nth-last-child()是從兄弟元素列表的尾端往回數
兩個虛擬類別同樣也可以串接使用
使用nth-child時,會將子層中的所有標籤都會一起列號計算
二、每隔n的項目選擇相同類型元素,:nth-of-type()
:nth-of-type(1):nth-last-of-type(1)相當於:only-of-type,但有較高的權重
使用nth-of-type時,會只將子層中的特定選擇列號計算
三、第一個字母與第一行內容
第一個字母,::first-letter
第一行內容,::first-line
只適用於標題或斷落等區塊元素,不是超連結的行內顯示,能夠用的屬性也有所限制(p98)
留言
追蹤
檢舉
上一篇
day26【主題六:選擇器】筆記1
下一篇
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
系列文
CSS 大全(第四版)閱讀筆記
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
day26【主題六:選擇器】筆記1
27
day27【主題六:選擇器】筆記2
28
day28【主題六:選擇器】筆記3-動態、介面狀態虛擬類別
29
day29【主題七:邊界範圍】
30
day30【主題八:數值與單位】
完整目錄
熱門推薦
{{ item.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
19854
篇
完賽人數
528
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
17th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
關於最近的釣魚信件
Qnap帳號於同一個IP反覆登入失敗.
資產管理紀錄表單請教
Diffusion Pipeline 同時多筆請求會 index out of bounds,有無可同時處理多筆的作法?
鼎新smart erp登入系統.出現錯誤訊息.LeaderWorkCenterS初始化失敗???
不懂Modelfile的Template要怎麼寫...
dockerDesktop +vm workstation pro17 問題請教
熱門回答
鼎新smart erp登入系統.出現錯誤訊息.LeaderWorkCenterS初始化失敗???
Qnap帳號於同一個IP反覆登入失敗.
資產管理紀錄表單請教
關於最近的釣魚信件
dockerDesktop +vm workstation pro17 問題請教
熱門文章
Spring Boot 安全認證 — JWT 及 OAuth2 認證 (發文被切掉,補充
8個能提升工作效率的SQL好習慣,方便你我他!
iReport教學:打造專業級PDF、Excel報表
前端框架 Vue、React的虛擬DOM (Virtual DOM)分身模擬機制。
優質免版權音樂下載 | 免費音樂資源網站推薦
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}