iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0

https://ithelp.ithome.com.tw/upload/images/20220927/20148082RGeAYOBnz8.png
資產負債表

養分篇中提到了CSS選擇器包含:通用選擇器 標籤(元素)選擇器 類別選擇器 ID選擇器偽裝(上)篇介紹虛擬類別中的
狀態選擇器(特殊狀態下才被套用),接下來介紹其他實用的選擇器。


屬性選擇器 (Attribute selectors)

就如同名稱所示,透過元素上的屬性來選擇:

span[class]{}
/* 選擇有class屬性的span */

span[class="sr-only"]{}
/* 選擇有class屬性且值只有sr-only的span */

span[class~="sr-only"]{}
/* 選擇有class屬性且其中一個值為sr-only的span */

span[class|="sr"]{}
/* 選擇有class屬性且值為sr或是sr-為前綴的span */

span[class^="sr-only"]{}
/* 選擇有class屬性且值為sr-only開頭的span */

span[class$="sr-only"]{}
/* 選擇有class屬性且值為sr-only結尾的span */

偽類 ( Pseudo-classes;虛擬類別 )選擇器

  • :root
    根元素,以HTML檔案來說,根元素就是<html>標籤。

  • :not()
    否定偽類,代表除了()內的目標之外其餘的元素,例如:

    div:not(.total){}
    /* class中沒有total的div */
    
  • :nth-child(n)
    這個元素下的子元素中,依先後排序(從1開始數),第n個子元素。(計算所有類型的元素)
    另外還有:
    :nth-last-child(n)則是從最後面開始數來第n個。
    :first-child 選第一個子元素。
    :last-child 選最後一個子元素。

  • :nth-of-type(n)
    這個元素的所有兄弟元素依先後排序(從1開始數),第n個兄弟元素。(只計算指定的元素)
    另外還有:
    :nth-last-of-type(n)則是從最後面開始數來第n個。
    :first-of-type 選第一個兄弟元素。
    :last-of-type 選最後一個兄弟元素。

CSS選擇器提供相當多種的方式,來準確的選擇到想要的目標元素,熟悉之後就可以寫出更為簡潔的樣式表出來,接下來就完成資產負債表的任務吧。

下一篇:棲位(上)


引用與資源:
freecodecamp
mdn_web_docs_Pseudo-classes
我的資產負債表


上一篇
Day12 - 偽裝(上) (table,虛擬類別;偽類)
下一篇
Day14 - 棲位(上) (position)
系列文
30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言