iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 26
0
自我挑戰組

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

day26【主題六:選擇器】筆記1

  • 分享至 

  • 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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言