伪元素

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

浏览器支持

  • Chrome：57。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：51。 <ph type="x-smartling-placeholder">
  • Safari：10.1. <ph type="x-smartling-placeholder">

来源

您可以为表单元素添加辅助提示 例如，带有 placeholder 属性的 <input>。 ::placeholder 伪元素可用于设置该文本的样式。

input::placeholder {
  color: darkcyan;
}

::placeholder 仅支持一部分 CSS 规则：

  • color
  • background 个房源
  • font 个房源
  • text 个房源
。

::cue

浏览器支持

  • Chrome：26。 <ph type="x-smartling-placeholder">
  • Edge：79。 <ph type="x-smartling-placeholder">
  • Firefox：55。 <ph type="x-smartling-placeholder">
  • Safari：7. <ph type="x-smartling-placeholder">

来源

伪元素导览的最后一个元素是 ::cue 伪元素。 这样你就可以设置 WebVTT 提示的样式 即 <video> 元素的字幕。

您还可以将选择器传入 ::cue， 用于设置字幕内特定元素的样式。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

检查您的理解情况

测试您对伪元素的掌握情况

以下哪一项不是伪元素？

::before
别忘了添加 content: '';。
::first-paragraph
在 CSS 中不存在。
::after
别忘了添加 content: '';。
::marker
当您使用列表元素或显示类型时，此为项目符号元素。
::pencil
在 CSS 中不存在。
:active
这是一个伪类，而不是伪元素。

可以在 HTML 文件中找到伪元素。

正确
虽然开发者工具可能会在 Elements 面板中显示伪元素，但在 HTML 中找不到伪元素，它们归浏览器所有。
错误
CSS 可以定位它们，但无法在 HTML 中找到它们。