Day13 - 偽裝(下) (屬性選擇器,偽類選擇器) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 13

Modern Web

30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書系列第 13 篇

Day13 - 偽裝(下) (屬性選擇器,偽類選擇器)

14th鐵人賽 css

前端小小咖

團隊週六 Podcast 團

2022-09-28 23:24:32

383 瀏覽

分享至

資產負債表

養分篇中提到了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 選最後一個兄弟元素。