阅读 254

[译文] 小提示:伪元素是子元素,吧。

小提示:伪元素是子元素,吧。

请看下列代码,一个有若干子元素的容器:

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>
复制代码

如果我这样写:

.container::before {
  content: "x"
}
复制代码

实质上等效于:

<div class="container">
  [[[ 在此插入 ::before 伪元素 ]]]
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>
复制代码

该伪元素大体上像是一个子元素。棘手的是,除了 ::before 这个创造了该伪元素的选择器(或者一个类似的在相同位置以一个 ::before 或者 ::after 结尾的选择器),再无其他选择器能够选中它。

举例来说,假设我将容器设置为一个 2×3 的网格,并将每个子元素都设置成药片格子风格:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}

.container > * {
  background: darkgray;
  border-radius: 4px;
  padding: 0.5rem;
}
复制代码

不使用伪元素时,效果如下:

六个子元素两两排列,形成整齐网格

如果我把上述伪元素选择器加上,将会得到如下效果:

六个子元素两两排列,但开头多出了一个子元素,把整体子元素向后挤开了一格

这合情合理,但也可能会是一个坑。伪元素常常作为装饰元素出现(它们差不多也应该用作装饰),因此,把它们规划到网格布局之中就会显得很怪异。

注意,选择器 .container > * 并未选中伪元素,未能使其背景色变为 darkgray,因为用这把枪射不中伪元素。这是伪元素的另一个小圈套。

在日常开发中,我发现伪元素的用途通常是通过绝对定位来实现某些装饰效果 —— 因此,如果你写过这样的代码:

.container::before {
  content: "";
  position: absolute;
  /* 一些装饰效果 */
}
复制代码

你甚至可能不会注意到你添加了一个元素。技术上来讲,伪元素归根到底是一个子元素,所以它会尽到一个子元素应尽的义务,但参与网格布局可不在其义务之内。并不是只有 CSS 网格布局如此。例如,你会发现在应用 Flex 布局时,伪元素就会成为 Flex 布局中的子项。你也可以对伪元素任意设置浮动,或其他形式的布局。

在调试工具中可以很清楚地看到,伪元素在 DOM 中的表现恰如一个子元素:

在调试工具中选中一个 ::before 元素

还有更多的机关暗道呢!

其中之一就是 :nth-child()。你会觉得既然伪元素是实实在在的子元素,那么它们就应该会被 :nth-child() 计算到,实际上并非如此。也就是说像这样的操作:

.container > :nth-child(2) {
  background: red;
}
复制代码

将会选中同一个元素,无论是否存在伪元素 ::before。对 ::after:nth-last-child 亦是同理。这就是我在文字标题中加了“吧”的原因。如果伪元素是货真价实的子元素,那么它们理应能够干预选择器的命中。

还有一个机巧之处,在 JavaScript 中,你无法像选中常规子元素那样选中伪元素。document.querySelector(".container::before"); 将会返回 null。如果你想用 JavaScript 获取到伪元素是因为想获取其样式,你可以使用一点 CSSOM 魔法来实现:

const styles = window.getComputedStyle(
  document.querySelector('.container'),
  '::before'
);
console.log(styles.content); // "x"
console.log(styles.color); // rgb(255, 0, 0)
console.log(styles.getPropertyValue('color'); // rgb(255, 0, 0)
复制代码

你是否中过伪元素的那些小圈套?

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。


掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划官方微博知乎专栏

关注下面的标签,发现更多相似文章
评论