CSS 播客 - 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
仅当您定义了 content
属性时,::before
和 ::after
伪元素才会在元素内创建子元素。
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
可以是任何字符串(即使是空字符串),但请注意,屏幕阅读器可能会读出空字符串以外的任何内容。
您可以添加图片 url
,它会以原始尺寸插入图片,因此您无法调整其大小。您还可以插入 counter
。
创建 ::before
或 ::after
元素后,您可以随意为其设置样式,且没有任何限制。您只能将 ::before
或 ::after
元素插入接受子元素的元素(包含文档树的元素),因此 <img />
、<video>
和 <input>
等元素将不起作用。
::first-letter
我们在本课程开始时见过这个伪元素。值得注意的是,以 ::first-letter
为目标平台时,并非所有 CSS 属性都可以使用。可用的属性包括:
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
的元素的 display
值为 block
、inline-block
、list-item
、table-caption
或 table-cell
时,::first-line
伪元素才会允许您设置文本第一行的样式。
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 */
}
::marker
仅支持一小部分 CSS 属性:
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;
}
检查您的掌握程度
测试您对伪元素知识的掌握情况
以下哪一项不是伪元素?
::before
content: '';
。::first-paragraph
::after
content: '';
。::marker
::pencil
:active
伪元素可在 HTML 文件中找到。