iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 26
0
自我挑戰組

CSS 大全（第四版）閱讀筆記系列 第 26 篇

day26【主題六：選擇器】筆記１

11th鐵人賽
772 瀏覽

  • 分享至 

  • xImage
    •  
  1. 元素選擇器：通常指的是HTML元素（因為XML允許使用者建立新的標記）。
  2. 一個ID值在一份HTML文件只能出現一次，不允許用空白分隔多重值。
  3. class和ID值定義區分大小寫。
  4. 屬性選擇器，h1 [class]
  5. 選擇空元素，: empty
  6. 選擇唯一的子代，: only-child
  7. 其他選取技巧(書籍「 CSS Secrets 中文版解決網頁設計問題的有效秘訣」)
    當列表中只有一個列表項時，我們把刪除按鈕隱藏起來了；這個需求是可以由 :only-child 選擇符來完成的
    only-child 等效於:first-child:last-child如果第一項同時也是最後一項(它就是唯一的那一項)
    only-child 也等效於 :nth-last-child(1)
    li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li {
    /* 當列表正好包含四項時，命中所有列表項 /}
    li:first-child:nth-last-child(n+4), li:first-child:nth-last-child(n+4) ~ li {
    /     當列表至少包含四項時，命中所有列表項 /}
    li:first-child:nth-last-child(-n+4), li:first-child:nth-last-child(-n+4) ~ li {
    /     當列表最多包含四項時，命中所有列表項 /}
    li:first-child:nth-last-child(n+2):nth-last-child(-n+6), li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
    /     當列表包含2～6項時，命中所有列表項 */
    }

上一篇
day25【主題五：濾鏡、混合、裁切與遮罩】裁切與合成遮罩、縮寫、類型、邊框、定位
下一篇
day27【主題六：選擇器】筆記2
系列文
CSS 大全（第四版）閱讀筆記 共 30 篇
  1. 26
    day26【主題六：選擇器】筆記１
  2. 27
    day27【主題六：選擇器】筆記2
  3. 28
    day28【主題六：選擇器】筆記3-動態、介面狀態虛擬類別
  4. 29
    day29【主題七：邊界範圍】
  5. 30
    day30【主題八：數值與單位】
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19847 篇
完賽人數
528 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙