有点提醒您伪元素是孩子，有点。

伪元素：似子元素，而非完全如此

让我们来看一个包含子元素的容器：

<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 或 ::after）之外，没有其他选择器能直接选中它。

例如，假设我们将容器设置为 2x3 网格，每个子元素为药丸状设计：

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

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

如果没有伪元素，效果如预期。但添加伪元素后，你会发现它参与了网格布局，这可能出乎意料。伪元素通常用于装饰性目的，参与内容布局显得有些奇怪。

请注意，.container > * 选择器没有使伪元素也变为深灰色，因为你无法通过这种方式选择伪元素。这是另一个需要注意的小问题。

在日常开发中，伪元素通常使用 position: absolute 进行装饰性操作：

.container::before {
  content: "";
  position: absolute;
  /* 装饰性样式 */
}

在这种情况下，你可能根本不会注意到伪元素的存在。虽然它在技术上仍然是子元素，参与了DOM结构，但它不会参与网格布局。这并非 CSS Grid 独有的现象，在 Flexbox 中，伪元素也会成为 Flex 项目。你可以随意使用浮动或其他布局方式来控制伪元素。

开发者工具清楚地显示伪元素在 DOM 中类似于子元素。

还有一些其他需要注意的问题：

其一是 :nth-child() 选择器。你可能会认为，如果伪元素是子元素，它们会影响 :nth-child() 计算，但事实并非如此。这意味着：

.container > :nth-child(2) {
  background: red;
}

无论是否存在 ::before 伪元素，都会选择相同的元素。::after、:nth-last-child 等选择器也是如此。这就是标题中“kinda”的原因。如果伪元素完全像子元素，它们会影响这些选择器。

另一个问题是，你无法像选择普通子元素那样在 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)

你是否遇到过其他关于伪元素的问题？

以上是有点提醒您伪元素是孩子，有点。的详细内容。更多信息请关注PHP中文网其他相关文章！