CSS Podcast - 014:偽元素
如果您的網站內容 你想讓第一個字母看起來更大 該如何達成這項目標?
在 CSS 中
您可以使用 ::first-letter
虛擬元素實現這類設計細節。
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
虛擬元素就像是不必新增其他 HTML 就能新增或指定額外元素。
這個範例解決方案使用 ::first-letter
是許多虛擬元素之一
他們有許多角色
本課程將介紹可用的虛擬元素和使用方式。
::before
和::after
兩者
::before
和
::after
。
您只有在定義 content
屬性時,才會在元素內建立子元素。
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
可以是任何字串
—連空白客戶也都能:
但請注意,螢幕閱讀器可能會朗讀空白字串以外的內容。
你可以加入一張圖片,url
。
這樣就能插入原始尺寸的圖片
這樣就無法調整大小
您也可以插入
counter
。
建立 ::before
或 ::after
元素後
您可以自由調整樣式
不受任何限制
您只能在可接受子元素的元素中插入 ::before
或 ::after
元素
(「含有文件樹狀結構的元素」)
因此 <img />
、<video>
和 <input>
等元素無法運作。
::first-letter
我們在課程開始時介紹了這個虛擬元素。
要注意的是,並非所有 CSS 屬性都能用於指定目標
::first-letter
。
可用的屬性如下:
color
background
屬性 (例如background-image
)border
屬性 (例如border-color
)float
font
屬性 (例如font-size
和font-weight
)- 文字屬性 (例如
text-decoration
和word-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
::first-line
虛擬元素可讓您設定第一行文字的樣式
只有在套用 ::first-line
的元素 display
值為 block
時
inline-block
、list-item
、table-caption
或 table-cell
。
p::first-line {
color: goldenrod;
font-weight: bold;
}
如同 ::first-letter
虛擬元素
您只能使用一部分的 CSS 屬性:
color
background
個房源font
個房源text
個房源
::backdrop
如果您的元素會以全螢幕模式顯示,
例如 <dialog>
或 <video>
您可以運用
::backdrop
虛擬元素:
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
虛擬元素可讓您設定清單項目的項目符號或編號樣式,或是 <summary>
元素的箭頭。
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
只有少數 CSS 屬性支援 ::marker
:
color
content
white-space
font
個房源animation
和transition
資源
您可以使用 content
屬性變更標記符號。舉例來說,您可以使用這個符號,為 <summary>
元素的封閉和空白狀態設定加號和減號。
::selection
::selection
虛擬元素可讓您設定所選文字的外觀樣式。
::selection {
background: green;
color: white;
}
這個虛擬元素可用來設定所有所選文字的樣式,如上述範例所示。 這項工具也可以搭配其他選取器使用,產生更具體的選擇樣式。
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
和其他虛擬元素一樣,您只能使用一部分的 CSS 屬性:
color
background-color
,但不是background-image
text
個房源
::placeholder
您可以在表單元素中新增輔助提示
例如含有 placeholder
屬性的 <input>
::placeholder
虛擬元素可讓您設定文字的樣式。
input::placeholder {
color: darkcyan;
}
::placeholder
僅支援部分 CSS 規則:
color
background
個房源font
個房源text
個房源
::cue
在本導覽虛擬元素導覽中
::cue
虛擬元素。
這樣您就可以設定 WebVTT 提示的樣式
也就是 <video>
元素的說明文字
您也可以將選取器傳遞至 ::cue
可讓您在字幕「內」設定特定元素樣式。
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
隨堂測驗
測試您對虛擬元素的相關知識
下列何者不是虛擬元素?
::marker
::first-paragraph
::after
::pencil
:active
::before
您可以在 HTML 檔案中找到虛擬元素。