iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
1
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 27

day27【主題六:選擇器】筆記2

  • 分享至 

  • xImage
  •  

 一、選擇每間隔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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言