CSS Podcast - 015:匿名課程
假設您收到了電子郵件註冊表單
如果電子郵件表單欄位中包含無效的電子郵件地址,則希望以紅色邊框顯示。
該怎麼做呢?
您可以使用 :invalid
CSS 虛擬類別
也是許多瀏覽器提供的虛擬類別之一
虛擬類別可讓您根據狀態變更和外部因素套用樣式。 這表示您的設計能回應使用者輸入的內容 (例如無效的電子郵件地址)。 相關內容會在選取器單元中詳細說明 本單元將詳細說明
與虛擬元素不同 詳情請參閱先前的單元 虛擬類別會掛接到元素可能所屬的特定狀態, 而不是設定該元素一般的樣式
互動狀態
以下虛擬類別是根據使用者與專頁之間的互動所導致。
:hover
如果使用者擁有滑鼠或觸控板等指標裝置
然後疊加在元素上
則可使用
:hover
可套用樣式。
這很適合用來提示元素可進行互動。
:active
這個狀態會在使用者與元素互動時觸發: 點擊等轉換。 如果使用滑鼠等指標裝置 表示點擊開始但尚未釋放。
:focus
、:focus-within
和:focus-visible
如果元素可接收焦點 (例如 <button>
),
回應使用者狀態
:focus
虛擬類別。
如果元素的子項元素獲得焦點
:focus-within
。
可選擇的元素,例如按鈕 當焦點位於焦點時,這些圓圈仍會顯示對焦環,即使他們按下了也沒關係。 這類情況下,開發人員會套用下列 CSS:
button:focus {
outline: none;
}
這個 CSS 會在元素獲得焦點時,移除預設的瀏覽器焦點環。
這會導致使用者使用鍵盤瀏覽網頁時,會發生無障礙功能方面的問題。
如果沒有對焦樣式
只要使用 Tab 鍵,他們就無法追蹤目前的焦點
通話對象::focus-visible
等元素透過鍵盤獲得焦點時,即可顯示焦點樣式。
,同時使用 outline: none
規則防止指標裝置與其互動。
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
虛擬類別會選取 id
與網址片段相符的元素。
假設您擁有以下 HTML:
<article id="content">
…
</article>
當網址包含 #content
時,您可以為該元素附加樣式。
#content:target {
background: yellow;
}
這很適合用來標示可能特別連結的區域 或是網站上的主要內容
歷史州別
:link
:link
虛擬類別可套用至任何具有 href
值尚未造訪的 <a>
元素。
:visited
您可使用
:visited
虛擬類別。
這個狀態與 :link
相反,但可用的 CSS 屬性較少
安全性因素。
您只能設定 color
、background-color
和
border-color
、outline-color
和 SVG fill
和 stroke
的顏色。
訂單案件
如要定義 :visited
樣式,
也可被明確性相同的連結虛擬類別覆寫。
因此
我們建議您使用 LVHA 規則,以特定順序為含有虛擬類別的連結設定樣式:
:link
、:visited
、:hover
、:active
。
a:link {}
a:visited {}
a:hover {}
a:active {}
表單狀態
下列虛擬類別可以選取表單元素 會在與元素互動時可能處於各種狀態的狀態。
:disabled
和:enabled
如果是表單元素
例如瀏覽器停用 <button>
則可使用
:disabled
虛擬類別。
:enabled
虛擬類別適用於相反狀態
但表單元素預設為 :enabled
因此,您不一定來到這裡學習這個虛擬類別。
:checked
和:indeterminate
:checked
虛擬類別適用於支援表單元素
例如核取方塊或圓形按鈕等項目處於勾選狀態
:checked
狀態是二進位(true 或 false) 狀態。
但是,在未勾選或未勾選的情況下,核取方塊是介於之間。
也就是
:indeterminate
狀態。
當系統顯示「全選」這個控制項,可以勾選群組中的所有核取方塊。 如果使用者之後取消勾選這些核取方塊 根核取方塊不再代表「all」正在檢查的項目 都應設為「不確定」狀態
<progress>
元素也具有未定狀態,可調整樣式。
常見的用途是提供條紋外觀,表示不太需要多少心力。
:placeholder-shown
如果表單欄位含有 placeholder
屬性且沒有值,
:placeholder-shown
虛擬類別可用來將樣式附加至該狀態。
一旦該領域有內容
無論是否有 placeholder
這個狀態就不再適用
驗證狀態
您可以使用虛擬類別回應 HTML 表單驗證,例如:
:valid
、
:invalid
和
:in-range
。
:valid
和 :invalid
虛擬類別適用於結構定義
例如含有必須比對的 pattern
的電子郵件欄位
才是有效欄位
使用者可以向使用者顯示這個有效的值狀態
以便他們瞭解他們可以安全地帶領公司前往下一個領域
如果輸入內容包含 min
和 max
,就可以使用 :in-range
虛擬類別。
例如數值輸入,「而且」值也會在這些範圍內。
使用 HTML 表單
您可以使用 required
屬性判斷該欄位是否為必要欄位。
:required
虛擬類別即為必填欄位。
您可以使用
:optional
虛擬類別。
按照索引、順序和出現次數選擇元素
一組虛擬類別會根據項目在文件中的位置選取項目。
:first-child
和:last-child
如要查看第一個或最後一個項目,
您可以運用
:first-child
和
:last-child
。
這些虛擬類別會傳回一組同層元素的第一個或最後一個元素。
:only-child
您也可以選取沒有同層級的元素
使用
:only-child
虛擬類別。
:first-of-type
和:last-of-type
您可以選取
:first-of-type
和
:last-of-type
看起來和 :first-child
和 :last-child
相同,但請考慮以下 HTML:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
此 CSS:
.my-parent div:first-child {
color: red;
}
由於第一個子項是段落而非 div,因此元素不會顯示紅色元素。
:first-of-type
虛擬類別在這方面相當實用。
.my-parent div:first-of-type {
color: red;
}
雖然第一個 <div>
是第二個子項,
仍是 .my-parent
元素中的第一個類型
因此,這項規則會顯示為紅色。
:nth-child
和:nth-of-type
您不需要只設定第一個和最後一個子子項及類型。
:nth-child
和
:nth-of-type
。
虛擬類別可讓您指定位於特定索引的元素。
CSS 選取器中的索引從 1 開始。
您也可以傳遞多個索引到這些虛擬類別。
如要選取所有偶數元素,可以使用 :nth-child(even)
。
您還可以建立更複雜的選取器,定期間隔間隔尋找項目。 使用 An+B 微語法。
li:nth-child(3n+3) {
background: yellow;
}
這個選取器會選取第三個項目
從項目 3 開始
此運算式中的 n
是索引。
始於 3 (3n
),就是該指數乘以多少。
假設您有 7 個 <li>
個項目,
因為 3n+3
會轉譯為 (3 * 0) + 3
,所以所選項目的第一個是 3。
下一個疊代作業會挑選項目 6,因為 n
已遞增為 1
。
例如 (3 * 1) + 3)
。
這個運算式適用於 :nth-child
和 :nth-of-type
。
你可以使用這種選擇器 數量選取器工具。
:only-of-type
最後,您可以在一組類似的同層中,找到特定類型的唯一元素
:only-of-type
。
如果想要選取只包含一個項目的清單,這個選項就很實用
或是想找出段落中唯一的粗體元素
尋找空白元素
有時您可以找出完全空白的元素 這也有一些虛擬類別
:empty
如果元素不含任何子項,
:empty
虛擬類別適用於這些類別。
不過,子項不只 HTML 元素或文字節點,也可以是空白字元、
當您為下列 HTML 進行偵錯,但不知道為何無法與 :empty
搭配使用時,這可能會令人困惑:
<div>
</div>
這是因為開頭和結尾的 <div>
之間留有空白字元。
這樣內容就沒有問題
如果您對 HTML 的控制權有限,並想隱藏空白元素,:empty
虛擬類別就十分有用。
例如 WYSIWYG 的內容編輯器
編輯器中,編輯者新增了空白段落。
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
您可以使用 :empty
找出並隱藏該訊息。
.post :empty {
display: none;
}
找出並排除多個元素
部分虛擬類別可協助您編寫更精簡的 CSS。
:is()
如要找出 .post
元素中的所有 h2
、li
和 img
子元素,
建議撰寫一個選擇器清單,如下所示:
.post h2,
.post li,
.post img {
…
}
使用:is()
虛擬類別,可編寫更精簡的版本:
.post :is(h2, li, img) {
…
}
:is
虛擬類別不僅程式碼比選取器清單更簡潔,也更有保障。
大多數情況下
如果選取器清單出現錯誤或不支援的選取器,
整個選取器清單都會失效
如果 :is
虛擬類別中傳遞的選取器發生錯誤,
系統就會忽略無效的選擇器,但會使用有效的選擇器。
:not()
您也可以使用
:not()
虛擬類別。
舉例來說,您可以使用該屬性設定所有不含 class
屬性的連結樣式。
a:not([class]) {
color: blue;
}
:not
虛擬類別也有助於改善無障礙功能。
舉例來說,即使 <img>
為空白值,也必須具備 alt
。
因此可以編寫 CSS 規則,為無效圖片加上粗紅色外框:
img:not([alt]) {
outline: 10px red;
}
隨堂測驗
測試自己的虛擬課程相關知識
虛擬類別就像是動態套用至元素的類別,虛擬元素本身則對元素本身採取行動。
以下何者為「功能」虛擬類別?
:is()
:not()
:empty
:target
下列何者是因使用者互動而完成的虛擬類別?
:hover
:focus-within
:target
:squeeze
:press
以下何者是 <form>
狀態虛擬類別?
:enabled
:valid
:loading
:indeterminate
:checked
:in-range
:fresh