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():target() 代表接受參數。:empty() 代表接受參數。:not()下列何者是因使用者互動而完成的虛擬類別？
:hover:press:squeeze:target:focus-within以下何者是 <form> 狀態虛擬類別？
:enabled:fresh:indeterminate:checked:in-range:loading:valid