2024-02-16|閱讀時間 ‧ 約 24 分鐘

CSS 程式札記 : 偽類與偽元素

本文將介紹 CSS 中的兩個重要概念:偽類與偽元素。通過理解和運用這些概念,你可以更好的控制網頁的樣式和佈局。

CSS 偽類 (Pseudo-classes)

偽類是一種用來定義元素特定狀態的樣式規則,它們以冒號(:)開頭,後接特定的關鍵字,常見的偽類包括:

  • :hover:當鼠標懸停在元素上時,應用樣式。
  • :active:當元素被激活(例如,點擊)時,應用樣式。
  • :focus:當元素獲得焦點(例如,通過鍵盤導航)時,應用樣式。
  • :nth-child():根據元素在其父元素中的位置來選擇並應用樣式。
a:hover {
color: red; /* 當鼠標懸停在鏈接上時,改變鏈接的文字顏色為紅色 */
}

input:focus {
border: 2px solid blue; /* 當輸入框獲得焦點時,改變其邊框顏色為藍色 */
}

button:active {
background-color: yellow; /* 當按鈕被點擊時,改變其背景顏色為黃色 */
}

li:nth-child(odd) {
background-color: lightgray; /* 選擇列表中的奇數項,並將其背景顏色設為淺灰色 */
}

:nth-child() 詳細介紹

:nth-child() 可以根據其在父元素中的順序選擇元素。它的語法為 :nth-child(an+b),其中 ab 是整數,可以是正數、負數或零。

  • :nth-child(odd):選擇奇數項。
  • :nth-child(even):選擇偶數項。
  • :nth-child(3n):每隔三個元素選擇一個元素,從第三個元素開始。
  • :nth-child(4n+1):每隔四個元素選擇一個元素,從第一個元素開始。

CSS 偽元素 (Pseudo-elements)

偽元素用於選擇並樣式化元素的特定部分,它們以兩個冒號(::)開頭,後接特定的關鍵字,常見的偽元素包括:

  • ::before:在元素內容之前插入內容。
  • ::after:在元素內容之後插入內容。
  • ::first-letter:選擇並樣式化元素的第一個字母。
  • ::first-line:選擇並樣式化元素的第一行文本。
div::before {
content: "【開頭】"; /* 在 div 元素的內容開始之前插入文本 "【開頭】" */
color: red; /* 將插入的文本顏色設為紅色 */
}

div::after {
content: "【結束】"; /* 在 div 元素的內容結束之後插入文本 "【結束】" */
color: blue; /* 將插入的文本顏色設為藍色 */
}

p::first-letter {
font-size: 2em; /* 將段落的第一個字母的字體大小設為原來的兩倍 */
color: green; /* 將段落的第一個字母的顏色設為綠色 */
}

p::first-line {
font-weight: bold; /* 將段落的第一行文字設為粗體 */
}

偽類與偽元素的區別

雖然偽元素和偽類都是用來擴展 CSS 選擇器的功能,但它們有一些關鍵的區別:

  1. 定義範圍:偽類用於描述元素的特定狀態,而偽元素用於選擇元素的特定部分。
  2. 語法:偽類以一個冒號(:)開頭,而偽元素以兩個冒號(::)開頭。
  3. 應用範圍:偽類可以應用於任何元素,而偽元素通常用於添加裝飾性內容或樣式化特定的文本部分。

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

分享至
成為作者繼續創作的動力吧!
歡迎來到 Hello Coding ! 程式札記,我會在這裡分享分享各種程式語言的學習心得,以及任何跟 Coding 相關的內容。這裡的內容會盡量簡單、實用,讓任何對程式設計有興趣的人都能從這裡得到收穫。
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

發表回應

成為會員 後即可發表留言