有點提醒您偽元素是孩子，有點。

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

讓我們來看一個包含子元素的容器：

<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中文網其他相關文章！