偽元素與偽類兩者都是通過在選擇器后附加一個特定的關鍵字來定義，遵循相似的語法規(guī)則，并在 CSS 規(guī)則塊中設置相應的樣式。偽元素 能夠通過 content 屬性添加或替換內容。例如，:before 和 :after 可以插入文本、圖像或其他生成的內容。偽類 僅影響元素的樣式，而不添加或修改內容。它們基于用戶的交互、文檔結構或其他邏輯條件來改變元素的表現(xiàn)。主要區(qū)別如下：

作用對象：

• 偽類選擇器（Pseudo-classes）作用于實際存在的元素，用于描述元素的某種特定狀態(tài)或關系，如鏈接的訪問狀態(tài)（:visited）、鼠標懸停狀態(tài)（:hover）、是否為文檔中的第一個子元素（:first-child）等。它們不直接改變元素的結構，而是影響元素在特定條件下的表現(xiàn)樣式。
• 偽元素選擇器（Pseudo-elements）則用于創(chuàng)建并選擇元素內的某個特定部分或是在元素前后生成新的、虛擬的內容節(jié)點。例如，:before 和 :after 可以用來插入額外內容，:first-line 和 :first-letter 分別選擇元素首行文本和首字母，:marker 控制列表項標記樣式等。這些偽元素并不對應于HTML文檔中的實際元素，但可以對其應用樣式，如同它們是真實存在的部分一樣。

語法標識：

• 偽類 通常使用一個冒號（:）進行標識，如 :hover、:focus。
• 偽元素 在 CSS3 中使用兩個連續(xù)的冒號（::）進行標識，以區(qū)分于舊版 CSS 中的偽類。盡管大多數(shù)現(xiàn)代瀏覽器仍接受單冒號表示偽元素（如 :before），但為了符合 W3C 標準和保持最佳實踐，建議使用雙冒號形式，如 ::before、::after。

可復用性：

• 偽類 可以在同一選擇器中組合使用，如 a:hover:focus 表示同時處于懸停和聚焦狀態(tài)的鏈接。
• 偽元素 由于代表了元素內部的特定部分或生成的新內容，一般不能在同一選擇器中重復出現(xiàn)。一個元素在同一時刻只能有一個:before或:after偽元素生效。

一、CSS3 偽元素選擇器詳解與應用實例

CSS3 偽元素是一種特殊的 CSS 選擇器，它們允許開發(fā)者在不修改 HTML 結構的前提下，通過 CSS 為元素添加或修改特定部分的樣式，或者在元素內部或外部生成并控制虛擬內容。以下是對幾種常見 CSS3 偽元素的詳解以及應用實例：

1、:before 和 :after

:before 和 :after 偽元素分別在所選元素的內容區(qū)域之后創(chuàng)建一個新的、無內容的、不可見的“子元素”。然后，通過給這個偽元素設置樣式（如內容、尺寸、顏色、背景等），使其變?yōu)榭梢?，并在視覺上表現(xiàn)為緊隨原元素內容之后的部分。這些內容由 content 屬性定義，并且可以應用其他樣式。

語法：

selector:before {
  content: "..." /* 或其他值 */;
  /* 其他樣式聲明 */
}
selector:after {
  content: "..." /* 或其他值 */;
  /* 其他樣式聲明 */
}

其中，content 屬性是定義偽元素生成內容的關鍵。它可以接受以下幾種值：

• 字符串：直接指定要顯示的文字。
• 引號包圍的HTML實體：如 content: "—";（破折號）。
• URL：插入圖片資源，如 content: url(image.png);。
• 生成內容關鍵字：如 content: counter(name);（計數(shù)器）或 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 常用于創(chuàng)建一個空的塊級元素，配合 clear:both 來清除浮動對后續(xù)元素的影響，避免“高度塌陷”問題。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

將 .clearfix 類應用于需要清除內部浮動的容器元素。

1.3. 替代或擴展HTML內容

利用 attr() 函數(shù)，可以從元素的屬性中提取值作為 :after 的內容，實現(xiàn)動態(tài)文本展示。

abbr[title]:after {
  content: " (" attr(title) ")";
  font-size: smaller;
  color: gray;
}

此例中，當鼠標懸停在帶有 title 屬性的 abbr 元素上時，會顯示一個包含 title 屬性值的小字號灰色括注內容。

1.4. 實現(xiàn)復雜形狀與動畫

結合 content、background、border 等屬性以及CSS3的 transform、transition 或 animation，可以使用 :after 創(chuàng)建復雜的形狀和動畫效果。

.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元素后創(chuàng)建了一個三角形下拉箭頭，并在鼠標懸停時實現(xiàn)平滑的下移動畫。

注意事項

• :after 偽元素必須與 content 屬性一起使用，否則不會產生任何效果。
• 由于 :after 是創(chuàng)建的虛擬元素，無法通過JavaScript進行DOM操作。
• 雖然 :after 生成的內容可以參與布局，但它不計入DOM，不影響語義，也不影響鍵盤導航等輔助功能。

總結而言，CSS3 偽元素選擇器通過在元素內容后插入自定義內容，極大地豐富了網頁設計的表現(xiàn)力，且無需改動HTML結構。熟練運用偽元素與其他CSS技巧，可以幫助開發(fā)者構建更加美觀、響應迅速且易于維護的網頁界面。

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 偽類選擇器詳解與實踐示例

CSS3 偽類選擇器是一種強大的工具，它允許開發(fā)者基于元素狀態(tài)而非其在文檔樹中的位置或類、ID等固有屬性來精確地定位并施加樣式。這些選擇器以特殊的語法結構描述元素的不同條件狀態(tài)，如用戶交互、位置關系、內容特性等，從而實現(xiàn)動態(tài)、響應式的網頁設計。以下是CSS3偽類選擇器的詳細解釋及其實際應用示例。

1、靜態(tài)偽類選擇器

:link與:visited

:link: 用于選擇尚未被用戶訪問過的超鏈接（<a>元素）。通常用于設置未訪問鏈接的基本樣式。

a:link {
  color: blue;
  text-decoration: none;
}

:visited: 選擇用戶已經訪問過的鏈接。用于設置已訪問鏈接的區(qū)分樣式。

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可以是數(shù)字、關鍵詞（even, odd）或公式（如2n+1）。

li:nth-child(2n) {
  background-color: #f9f9f9;
}

4、內容相關偽類選擇器

:empty, :target, :enabled, :disabled, :checked等

:empty: 選擇沒有任何內容（包括子元素、文本節(jié)點等）的元素。

div.empty:empty {
  display: none;
}

:target: 選擇當前URL片段標識符（hash）與該元素ID相匹配的元素。

#content:target {
  background-color: lightyellow;
}

:enabled與:disabled: 分別選擇啟用狀態(tài)與禁用狀態(tài)的表單元素。

input:enabled {
  background-color: white;
}
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:checked: 用于復選框（<input type="checkbox">）、單選按鈕（<input type="radio">）或<option>元素處于選中狀態(tài)時。

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偽類選擇器及其應用場景，開發(fā)者能夠編寫出更高效、更具表現(xiàn)力和交互性的CSS代碼，提升網站的用戶體驗和視覺效果。隨著CSS標準的不斷演進，還可能有更多新的偽類選擇器加入到CSS3的行列中，為前端開發(fā)提供更為豐富和精細的控制手段。

無論是偽類還是偽元素，都是為了增強 CSS 選擇器的功能，使開發(fā)者能夠在不改動 HTML 結構的情況下，更精細地控制元素的樣式和布局。

到此這篇關于CSS3 偽元素與偽類選擇器區(qū)別、詳解與應用實例的文章就介紹到這了,更多相關CSS3 偽元素與偽類選擇器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論