偽元素與偽類兩者都是透過在選擇器後面附加一個特定的關鍵字來定義，遵循相似的語法規則，並在CSS 規則區塊中設定相應的樣式。偽元素能夠透過content 屬性來新增或替換內容。例如，:before 和:after 可以插入文字、圖像或其他產生的內容。偽類僅影響元素的樣式，而不添加或修改內容。它們基於使用者的互動、文件結構或其他邏輯條件來改變元素的表現。主要區別如下：
作用對象：
偽類選擇器（Pseudo-classes）作用於實際存在的元素，用來描述元素的某種特定狀態或關係，如連結的存取狀態（ :visited ）、滑鼠懸停狀態（ :hover ）、是否為文檔中的第一個子元素（ :first-child ）等。它們不會直接改變元素的結構，而是影響元素在特定條件下的表現樣式。偽元素選擇器（Pseudo-elements）則用於建立並選擇元素內的某個特定部分或是在元素前後產生新的、虛擬的內容節點。例如， :before和:after可以用來插入額外內容， :first-line和:first-letter分別選擇元素首行文字和首字母， :marker控制列表項目標記樣式等。這些偽元素並不對應於HTML文件中的實際元素，但可以對其應用樣式，如同它們是真實存在的部分一樣。
語法標識：
偽類通常使用一個冒號（ : ）來標識，如:hover 、 :focus 。偽元素在CSS3 中使用兩個連續的冒號（ :: ）進行標識，以區分於舊版CSS 中的偽類。儘管大多數現代瀏覽器仍接受單冒號表示偽元素（如:before ），但為了符合W3C 標準和保持最佳實踐，建議使用雙冒號形式，如::before 、 ::after 。
可複用性：
偽類可以在同一選擇器中組合使用，如a:hover:focus表示同時處於懸停和聚焦狀態的連結。偽元素由於代表了元素內部的特定部分或產生的新內容，一般不能在同一選擇器中重複出現。一個元素在同一時刻只能有一個:before或:after偽元素生效。
CSS3 偽元素是一種特殊的CSS 選擇器，它們允許開發者在不修改HTML 結構的前提下，透過CSS 為元素添加或修改特定部分的樣式，或在元素內部或外部產生並控制虛擬內容。以下是幾種常見CSS3 偽元素的詳解以及應用實例：
1、 :before和:after
:before和:after偽元素分別在所選元素的內容區域之後創建一個新的、無內容的、不可見的「子元素」。然後，透過為這個偽元素設定樣式（如內容、尺寸、顏色、背景等），使其變為可見，並在視覺上表現為緊接在原始元素內容之後的部分。這些內容由content屬性定義，並且可以套用其他樣式。
文法:
selector:before {
content: "..." /* 或其他值 */;
/* 其他樣式宣告 */
}
selector:after {
content: "..." /* 或其他值 */;
/* 其他樣式宣告 */
}其中， content屬性是定義偽元素生成內容的關鍵。它可以接受以下幾種值：
字串：直接指定要顯示的文字。引號所包圍的HTML實體：如content: "—"; （破折號）。 URL ：插入圖片資源，如content: url(image.png); 。產生內容關鍵字：如content: counter(name); （計數器）或content: attr(attribute-name); （取得元素屬性值）。
應用實例：
1.1. 添加裝飾性內容
添加引號、圖示或其他裝飾性元素。
新增引號：
blockquote:before {
content: open-quote;
font-size: larger;
color: #666;
}
blockquote:after {
content: close-quote;
}在清單項目前/後新增自訂圖示：
li:before {
content: url(icon-checkmark.svg);
margin-right: 0.5em;
}
li.completed:after {
content: "2713"; /* Unicode 字元：對勾 */
color: green;
font-size: 1.5em;
vertical-align: super;
}1.2. 清除浮動
:after常用於創建一個空的塊級元素，配合clear:both來清除浮動對後續元素的影響，避免「高度塌陷」問題。
.clearfix:after {
content: "";
display: table;
clear: both;
}將.clearfix類別套用至需要清除內部浮動的容器元素。
1.3. 替代或擴充HTML內容
利用attr()函數，可以從元素的屬性中提取值作為:after的內容，實現動態文字展示。
abbr[title]:after {
content: " (" attr(title) ")";
font-size: smaller;
color: gray;
}此範例中，當滑鼠懸停在帶有title屬性的abbr元素上時，會顯示一個包含title屬性值的小字號灰色括注內容。
1.4. 實現複雜形狀與動畫
結合content 、 background 、 border等屬性以及CSS3的transform 、 transition或animation ，可以使用:after創造複雜的形狀和動畫效果。
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: ⅓em solid transparent;
border-right: ⅓em solid transparent;
border-bottom: ⅓em solid #007BFF;
border-left: ⅓em solid transparent;
margin-left: 0.½em;
}
.button:hover:after {
transform: translateY(-0.1em);
transition: transform 0.2s ease-in-out;
}上述程式碼在.button元素後面建立了一個三角形下拉箭頭，並在滑鼠懸停時實現平滑的下移動畫。
注意事項
:after偽元素必須與content屬性一起使用，否則不會產生任何效果。由於:after是建立的虛擬元素，無法透過JavaScript進行DOM操作。雖然:after產生的內容可以參與佈局，但它不計入DOM，不影響語義，也不影響鍵盤導航等輔助功能。
總結而言，CSS3 偽元素選擇器透過在元素內容後插入自訂內容，大大豐富了網頁設計的表現力，且無需改變HTML結構。熟練運用偽元素與其他CSS技巧，可以幫助開發者建立更美觀、反應迅速且易於維護的網頁介面。
2、 :first-line和:first-letter
:first-line偽元素選擇器用於設定元素內首行文字的樣式，而:first-letter偽元素則用於設定元素內首字母的樣式。
文法:
selector:first-line {
/* 樣式宣告 */
}
selector:first-letter {
/* 樣式宣告 */
}應用實例：
首行縮排：
article p:first-line {
text-indent: 2em;
}首字母大寫與裝飾：
article h2:first-letter {
font-size: 2em;
float: left;
margin-right: 0.5em;
line-height: 0.8;
color: #8A2BE2;
background-color: #F8F8FF;
padding: 0.⅔em 0.⅓em;
border-radius: 0.5em;
}CSS3 偽類選擇器是一種強大的工具，它允許開發者基於元素狀態而非其在文件樹中的位置或類別、ID等固有屬性來精確地定位並施加樣式。這些選擇器以特殊的語法結構描述元素的不同條件狀態，如使用者互動、位置關係、內容特性等，從而實現動態、響應式的網頁設計。以下是CSS3偽類選擇器的詳細解釋及其實際應用範例。
1.靜態偽類選擇器
:link與:visited
:link : 用來選擇尚未被使用者造訪過的超連結（ <a>元素）。通常用於設定未訪問連結的基本樣式。
a:link {
color: blue;
text-decoration: none;
} :visited : 選擇使用者已經造訪過的連結。用於設定已訪問連結的區分樣式。
a:visited {
color: purple;
} 2.使用者互動偽類選擇器:hover , :focus , :active
:hover : 當滑鼠指標懸浮在元素上時，符合該元素。
button:hover {
background-color: #f0f0f0;
cursor: pointer;
} :focus : 選擇獲得焦點的元素，常見於表單控製或可聚焦元素（如<input> , <textarea> , <button>等）。
input:focus {
outline: 2px solid #007BFF;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
} :active : 用於表示使用者正在啟動或按下某個元素（通常在滑鼠點擊或觸控螢幕上按壓時）。
a:active {
color: red;
font-weight: bold;
} 3、結構化偽類別選擇器:first-child , :last-child , :only-child , :nth-child(n)等
:first-child : 選擇作為其父元素第一個子元素的元素。
li:first-child {
list-style-type: square;
} :last-child : 選擇作為其父元素最後一個子元素的元素。
div > p:last-child {
margin-bottom: 0;
} :only-child : 選擇沒有兄弟元素的元素。
.message:only-child {
border-width: 2px;
} :nth-child(n) : 選擇其父元素的第n個子元素，其中n可以是數字、關鍵字（ even , odd ）或公式（如2n+1 ）。
li:nth-child(2n) {
background-color: #f9f9f9;
}4.內容相關偽類選擇器
:empty , :target , :enabled , :disabled , :checked等
:empty : 選擇沒有任何內容（包括子元素、文字節點等）的元素。
div.empty:empty {
display: none;
} :target : 選擇目前URL片段識別碼（hash）與該元素ID相符的元素。
#content:target {
background-color: lightyellow;
} :enabled與:disabled: 分別選擇啟用狀態與停用狀態的表單元素。
input:enabled {
background-color: white;
}
input:disabled {
opacity: 0.6;
cursor: not-allowed;
} :checked : 用於複選框（ <input type="checkbox"> ）、單選按鈕（ <input type="radio"> ）或<option>元素處於選取狀態時。
input[type="checkbox"]:checked + label {
text-decoration: line-through;
}5.否定偽類選擇器
:not(selector)
:not() : 選擇不符合括號內指定選擇器的元素。
/* 除了class為"exclude"的所有段落 */
p:not(.exclude) {
color: green;
}6.其他偽類選擇器
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type等
:root : 選擇文檔的根元素（HTML文檔中通常是<html>元素）。
:root {
--primary-color: #3498db;
} :nth-of-type(n)與:nth-last-of-type(n): 類似:nth-child(n) ，但僅針對同級元素中特定類型的子元素。
article:nth-of-type(even) {
background-color: #f5f5f5;
} :first-of-type , :last-of-type與:only-of-type: 分別選擇同級元素中第一個、最後一個或唯一一個特定類型的子元素。
div > p:first-of-type {
font-weight: bold;
}透過熟練以上CSS3偽類選擇器及其應用場景，開發者能夠編寫出更有效率、更具表現力和互動性的CSS程式碼，提升網站的使用者體驗和視覺效果。隨著CSS標準的不斷演進，還可能有更多新的偽類選擇器加入到CSS3的行列中，為前端開發提供更豐富和精細的控製手段。
無論是偽類或偽元素，都是為了增強CSS 選擇器的功能，使開發者能夠在不改動HTML 結構的情況下，更精細地控制元素的樣式和佈局。
到此這篇關於CSS3 偽元素與偽類選擇器區別、詳解與應用實例的文章就介紹到這了,更多相關CSS3 偽元素與偽類選擇器內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！