CSS 偽類與偽元素:深入探討
CSS 支援多種選擇器來識別樣式元素，每個選擇器都有自己的一組規則。雖然大多數選擇方法都很簡單，但偽類和偽元素提供了更大的靈活性。它們允許您根據元素在結構中的狀態或位置來選擇元素，或選擇內容的特定部分。
人們可能會發現有效地使用這些選擇器具有挑戰性，因為偽類和偽元素之間可能存在混淆。如何區分這兩類不同的選擇器?
理解 CSS 偽類
CSS 偽類表示可套用於選擇器的情境修飾符，從而在特定條件下啟用元素的樣式。此類關鍵字允許基於諸如遊標懸停、點擊互動或輸入欄位中的文字輸入等事件來定位元素。
當與其他 CSS 選擇器一起使用時，偽類會透過修改元素的外觀或行為來響應用戶交互，從而增強網站的交互性，從而提供對樣式和交互性的精細控制。
CSS 偽類語法和用法
CSS 偽類的語法由冒號 (:) 和後跟偽類的名稱組成，其結構如下:
selector:pseudo-class {
/* styles */
}
在這個語法中:
CSS 中的術語「選擇器」是指 HTML 文件的一個或多個特定元件，旨在透過應用各種偽類來接收樣式屬性。選擇器可以採用任意數量的形式，包括單獨的 HTML 標籤、類別、ID，甚至由多個條件組成的複合選擇。雖然選擇器通常在 CSS 規則集中使用，但它們的缺失將導致偽類在符合條件的元素中普遍應用其樣式規則。
在這種情況下，偽類是指表示人們希望關注和解決的特定條件或狀態的關鍵字。
CSS 中的偽類根據其功能和滿足的標準可以大致分為各種類別，其中包括: 1．類別（一般）:這些偽類適用於特定類別或類型內的所有元素。例如懸停、焦點和活動。2。子類別:特定於元素的某些子類別的偽類。例如，訪問僅用於連結。3。後代:選擇具有特定屬性的後代的元素的偽類。一個例子是:first-child.4。子元素:選擇作為另一個元素的子元素的元素。範例::last-child.5。兄弟姐妹:根據彼此相對的位置在兩個或更多兄弟姐妹之間進行選擇
用戶互動
:徘徊
|
當遊標移到指定元素上時，該腳本利用 JavaScript 中內建的懸停事件來選擇該元素。
:積極的
|
當使用者與介面元素互動時，例如透過點擊它，系統將選擇該特定元素。此選擇過程允許在程式或應用程式內進一步互動和操作所選元素。
:訪問過
|
選擇使用者造訪過的連結。
結構性
:第一個孩子
|
迭代指定父節點的每個直接子元素，並傳回序列中最初遇到的元素。
:最後一個孩子
|
檢索給定父節點中的最終後代元素。
:第n個孩子(n)
|
根據元素在父實體中的層次結構位置來挑選和選擇元素，使人們能夠瞄準特定的後代。
表格相關
:禁用
|
選擇禁用的表單元素。
:檢查過
|
選擇選取的單選按鈕或複選框。
UI 元素狀態
:無效的
|
選擇無效的表單元素。
:必需的
|
選擇表單元素的必填欄位。
:選修的
|
選擇作為可選欄位的表單元素。
連結相關
:關聯
|
選擇未造訪的連結。
基於語言的
:郎()
|
使用“lang”屬性提供的語言資訊來挑選和選擇元素。
人們可以嘗試在圖庫內的圖像上應用懸停效果，其中典型的風格選擇涉及在用戶透過懸停進行互動時放大或調暗視覺效果。
探索 CSS 偽元素
利用 CSS 偽元素提供了將專用關鍵字與選擇器結合使用的能力，從而可以對元素內容的特定方面進行樣式設定或添加補充資料。此類關鍵字有助於根據元素的結構組成來定位和自訂元素。
偽元素提供了增強網頁視覺外觀和佈局的強大方法，透過樣式技術模擬傳統 HTML 元素的功能。透過利用這些元素，設計人員可以創建視覺上引人注目的設計，同時保持語義完整性。
CSS 偽元素語法與實現
CSS 中的偽類採用特定的語法結構，需要使用兩個冒號 (:::)，後面接著偽類的命名法。基本表達式可以表示如下:
selector::pseudo-element {
/* styles */
}
在這個語法中:
偽類別 ::before 或 ::after 套用於其中提供的選擇器指定的特定元素。選擇器可以代表任何有效的 CSS 規則，也可以完全不包含選擇器。
偽元素，也稱為::pseudo-element 或::pseudo，是一種 CSS 規則，它針對 HTML 元素結構的特定部分，而不影響其佈局或內容。它允許開發人員透過以創造性的方式操作元素來創建視覺效果並自訂使用者介面。偽元素通常在選擇器中單獨使用，因為它們的目的是修改單個元素而不是多個元素的外觀。
以下是一些偽元素:
::前
|
將給定文字插入已識別 HTML 元素內容中的特定位置（位於其現有內容之前）。
—|—
::後
|
此操作涉及在指定 HTML 元素內緊跟著現有文字插入新資料，通常由其標籤名稱或 ID 屬性值表示。此過程通常用於為現有網頁添加附加內容，例如圖像、影片或補充訊息，而無需直接修改原始原始碼。
::第一個字母
|
透過風格增強來裝飾給定元素中包含的文字的初始字元。
::選擇
|
以吸引人的外觀裝飾用戶遊標所選的文字片段。
::標記
|
修改清單中單一項目的視覺呈現，例如調整與該項目關聯的項目符號或數字指示符的外觀。
::提示
|
利用多媒體元件內提示的風格配置，例如 和 ，通常應用於字幕和字幕上下文。
使用::before 和::after 偽元素可能會為理解帶來挑戰，因此熟悉這些概念對於熟練 CSS 的其他方面至關重要。
共同點和不同點
層疊樣式表 (CSS) 中的偽類和偽元素具有某些相似之處，同時也表現出顯著的差異。
|
偽類
|
偽元素
—|—|—
句法
|
以一個冒號 (:) 為前綴。
|
以兩個冒號 (::) 為前綴。
用法
|
根據組件的當前狀態、位置或使用者互動來選擇組件並設定其格式。
|
利用元素內容的風格面，或產生虛擬元件來增強視覺呈現和使用者體驗。
選擇器
|
複雜或複合選擇器可能包含以逗號分隔的元件列表，並且可以將內部浮點值插入到該列表中的任何位置。
|
給定的語句以優雅的方式如下:選擇器的最後一個元素，它必須作為其最終組成部分，同時只出現一次。
內容插入
|
此元素的主要功能是根據目前狀態或上下文設定文字樣式，而不是插入任何實際內容。
|
您可以將附加資料合併到指定元素的內容中，或將其附加到指定元素的內容中。
版式樣式
|
通常不用於排版樣式。
|
用於傳達文字和印刷上的細微差別，例如::first-line 和::first-letter 樣式。
目標零件
|
以整個元素為目標。
|
針對元素內容的特定部分。
瀏覽器支援
|
一般都得到很好的支持。
|
儘管某些過時的瀏覽器可能會遇到功能限制，但該網站的瀏覽器相容性總體上很強大。
偽類和偽元素在透過 CSS 向網站賦予不同的風格屬性和互動功能方面發揮著至關重要的作用。儘管有某些相似之處，但它們在網頁設計和開發方面表現出獨特的功能。
偽類與偽元素的實際應用
您可以透過將 CSS 偽類和元素應用到各種創造性的工作中來增強對 CSS 偽類和元素的理解。可以執行的一些簡單任務包括設計個人資料卡、製作導航選單和完善清單樣式等。這些追求提供了實踐經驗，可以更熟練地執行 CSS 能力，同時為他們的數位作品賦予活力和視覺吸引力。