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
::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
的元素具有 block
的 display
值时,
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 */
}
::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
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
您可以为表单元素添加辅助提示
例如,带有 placeholder
属性的 <input>
。
::placeholder
伪元素可用于设置该文本的样式。
input::placeholder {
color: darkcyan;
}
::placeholder
仅支持一部分 CSS 规则:
color
background
个房源font
个房源text
个房源
::cue
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
伪元素导览的最后一个元素是
::cue
伪元素。
这样你就可以设置 WebVTT 提示的样式
即 <video>
元素的字幕。
您还可以将选择器传入 ::cue
,
用于设置字幕内特定元素的样式。
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
检查您的理解情况
测试您对伪元素的掌握情况
以下哪一项不是伪元素?
:active
::after
::marker
::pencil
::before
::first-paragraph
可以在 HTML 文件中找到伪元素。