在Web開發中，CSS（層疊樣式表）是用于控制網頁外觀和布局的核心技術之一。CSS提供了豐富的選擇器，使得開發者能夠精確地選擇和樣式化HTML元素。其中，UI狀態偽類選擇器（UI State Pseudo-classes）是一類特殊的選擇器，它們根據元素的特定狀態來應用樣式。這些狀態可以是用戶的交互行為（如鼠標懸停、點擊）、表單控件的狀態（如選中、禁用）等。
本文將詳細介紹CSS中的UI狀態偽類選擇器，包括它們的定義、使用方法、實際應用場景以及兼容性考慮。通過本文的學習，您將能夠更好地理解和運用這些選擇器，從而提升網頁的交互性和用戶體驗。
UI狀態偽類選擇器是CSS中的一類偽類選擇器，它們根據元素的特定狀態來應用樣式。這些狀態通常與用戶的交互行為或表單控件的狀態相關。例如，當用戶將鼠標懸停在一個鏈接上時，可以使用:hover偽類選擇器來改變鏈接的顏色或背景。
UI狀態偽類選擇器的語法通常以冒號（:）開頭，后跟偽類名稱。例如，:hover、:active、:focus等都是常見的UI狀態偽類選擇器。
:hover:hover偽類選擇器用于選擇用戶將鼠標懸停在元素上時的狀態。它通常用于鏈接、按鈕等交互元素，以提供視覺反饋。
a:hover {
color: red;
text-decoration: underline;
}
在上面的例子中，當用戶將鼠標懸停在鏈接上時，鏈接的顏色將變為紅色，并且會出現下劃線。
:active:active偽類選擇器用于選擇用戶激活（點擊）元素時的狀態。它通常用于按鈕、鏈接等交互元素，以提供點擊時的視覺反饋。
button:active {
background-color: green;
}
在上面的例子中，當用戶點擊按鈕時，按鈕的背景顏色將變為綠色。
:focus:focus偽類選擇器用于選擇當前獲得焦點的元素。它通常用于表單控件（如輸入框、按鈕）等，以提供焦點時的視覺反饋。
input:focus {
border-color: blue;
outline: none;
}
在上面的例子中，當輸入框獲得焦點時，邊框顏色將變為藍色，并且去除默認的輪廓線。
:visited:visited偽類選擇器用于選擇用戶已訪問過的鏈接。它通常用于鏈接，以區分已訪問和未訪問的鏈接。
a:visited {
color: purple;
}
在上面的例子中，已訪問的鏈接將顯示為紫色。
:link:link偽類選擇器用于選擇未訪問的鏈接。它通常用于鏈接，以區分已訪問和未訪問的鏈接。
a:link {
color: blue;
}
在上面的例子中，未訪問的鏈接將顯示為藍色。
:checked:checked偽類選擇器用于選擇被選中的表單控件（如復選框、單選按鈕）。它通常用于自定義表單控件的樣式。
input[type="checkbox"]:checked {
background-color: yellow;
}
在上面的例子中，當復選框被選中時，背景顏色將變為黃色。
:disabled:disabled偽類選擇器用于選擇被禁用的表單控件。它通常用于自定義禁用狀態下的表單控件樣式。
input:disabled {
background-color: gray;
color: white;
}
在上面的例子中，禁用的輸入框將顯示為灰色背景和白色文字。
:enabled:enabled偽類選擇器用于選擇未被禁用的表單控件。它通常用于自定義啟用狀態下的表單控件樣式。
input:enabled {
background-color: white;
color: black;
}
在上面的例子中，啟用的輸入框將顯示為白色背景和黑色文字。
:required:required偽類選擇器用于選擇必填的表單控件。它通常用于自定義必填字段的樣式。
input:required {
border-color: red;
}
在上面的例子中，必填的輸入框將顯示為紅色邊框。
:optional:optional偽類選擇器用于選擇非必填的表單控件。它通常用于自定義非必填字段的樣式。
input:optional {
border-color: green;
}
在上面的例子中，非必填的輸入框將顯示為綠色邊框。
:valid:valid偽類選擇器用于選擇通過驗證的表單控件。它通常用于自定義驗證通過后的表單控件樣式。
input:valid {
border-color: green;
}
在上面的例子中，通過驗證的輸入框將顯示為綠色邊框。
:invalid:invalid偽類選擇器用于選擇未通過驗證的表單控件。它通常用于自定義驗證失敗后的表單控件樣式。
input:invalid {
border-color: red;
}
在上面的例子中，未通過驗證的輸入框將顯示為紅色邊框。
:in-range:in-range偽類選擇器用于選擇值在指定范圍內的表單控件。它通常用于自定義值在范圍內的表單控件樣式。
input[type="number"]:in-range {
border-color: green;
}
在上面的例子中，值在范圍內的數字輸入框將顯示為綠色邊框。
:out-of-range:out-of-range偽類選擇器用于選擇值超出指定范圍內的表單控件。它通常用于自定義值超出范圍后的表單控件樣式。
input[type="number"]:out-of-range {
border-color: red;
}
在上面的例子中，值超出范圍的數字輸入框將顯示為紅色邊框。
:read-only:read-only偽類選擇器用于選擇只讀的表單控件。它通常用于自定義只讀狀態下的表單控件樣式。
input:read-only {
background-color: lightgray;
}
在上面的例子中，只讀的輸入框將顯示為淺灰色背景。
:read-write:read-write偽類選擇器用于選擇可讀寫的表單控件。它通常用于自定義可讀寫狀態下的表單控件樣式。
input:read-write {
background-color: white;
}
在上面的例子中，可讀寫的輸入框將顯示為白色背景。
:default:default偽類選擇器用于選擇默認的表單控件。它通常用于自定義默認狀態下的表單控件樣式。
input:default {
border-color: blue;
}
在上面的例子中，默認的輸入框將顯示為藍色邊框。
:indeterminate:indeterminate偽類選擇器用于選擇狀態不確定的表單控件（如未選中的復選框）。它通常用于自定義狀態不確定的表單控件樣式。
input[type="checkbox"]:indeterminate {
background-color: yellow;
}
在上面的例子中，狀態不確定的復選框將顯示為黃色背景。
:target:target偽類選擇器用于選擇當前URL片段標識符指向的元素。它通常用于自定義目標元素的樣式。
#section1:target {
background-color: yellow;
}
在上面的例子中，當URL片段標識符指向#section1時，#section1元素的背景顏色將變為黃色。
:empty:empty偽類選擇器用于選擇沒有子元素的元素。它通常用于自定義空元素的樣式。
div:empty {
background-color: lightgray;
}
在上面的例子中，沒有子元素的div將顯示為淺灰色背景。
:not():not()偽類選擇器用于選擇不符合指定條件的元素。它通常用于排除特定元素。
input:not([type="submit"]) {
border-color: blue;
}
在上面的例子中，除了提交按鈕之外的所有輸入框將顯示為藍色邊框。
UI狀態偽類選擇器可以與其他選擇器組合使用，以實現更復雜的樣式控制。例如，可以將:hover與:focus組合使用，以同時應用懸停和焦點狀態下的樣式。
button:hover:focus {
background-color: orange;
}
在上面的例子中，當按鈕同時處于懸停和焦點狀態時，背景顏色將變為橙色。
UI狀態偽類選擇器在表單驗證中非常有用。通過使用:valid、:invalid、:required等偽類選擇器，可以為表單控件提供實時的驗證反饋。
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
input:required {
border-width: 2px;
}
在上面的例子中，通過驗證的輸入框將顯示為綠色邊框，未通過驗證的輸入框將顯示為紅色邊框，必填的輸入框將顯示為更粗的邊框。
UI狀態偽類選擇器可以用于增強導航菜單的交互性。通過使用:hover、:active等偽類選擇器，可以為導航菜單項提供懸停和點擊時的視覺反饋。
nav a {
color: black;
text-decoration: none;
}
nav a:hover {
color: blue;
text-decoration: underline;
}
nav a:active {
color: red;
}
在上面的例子中，導航菜單項在懸停時將顯示為藍色并帶有下劃線，在點擊時將顯示為紅色。
UI狀態偽類選擇器可以用于增強按鈕的交互性。通過使用:hover、:active、:focus等偽類選擇器，可以為按鈕提供懸停、點擊和焦點時的視覺反饋。
button {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
button:active {
background-color: lightblue;
}
button:focus {
outline: 2px solid orange;
}
在上面的例子中，按鈕在懸停時將顯示為深藍色，在點擊時將顯示為淺藍色，在獲得焦點時將顯示為橙色輪廓。
UI狀態偽類選擇器可以用于增強圖片展示的交互性。通過使用:hover、:focus等偽類選擇器，可以為圖片提供懸停和焦點時的視覺反饋。
img {
border: 2px solid black;
}
img:hover {
border-color: blue;
}
img:focus {
border-color: orange;
}
在上面的例子中，圖片在懸停時將顯示為藍色邊框，在獲得焦點時將顯示為橙色邊框。
UI狀態偽類選擇器在現代瀏覽器中得到了廣泛支持，但在一些舊版瀏覽器中可能存在兼容性問題。為了確保網頁在不同瀏覽器中的一致性，建議在使用UI狀態偽類選擇器時進行兼容性測試，并根據需要使用CSS前綴或JavaScript進行降級處理。
UI狀態偽類選擇器是CSS中非常強大且實用的工具，它們能夠根據元素的特定狀態來應用樣式，從而提升網頁的交互性和用戶體驗。通過本文的學習，您應該已經掌握了常見的UI狀態偽類選擇器的使用方法，并了解了它們在實際應用中的場景和注意事項。希望這些知識能夠幫助您在Web開發中更好地運用CSS，打造出更加出色的網頁。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
