[译文] 小提示：伪元素是子元素，吧。

• 原文地址：A Little Reminder That Pseudo Elements are Children, Kinda.
• 原文做者：Chris Coyier
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Badd
• 校对者：lgh757079506, Moonliujk

小提示：伪元素是子元素，吧。

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

<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 中的表现恰如一个子元素：

还有更多的机关暗道呢！

其中之一就是 :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 连接。

---

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