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

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

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

如果我們添加如下樣式：

 .container::before {
  content: "x";
}

效果相當(dāng)於：

<div class="container">
  [[[ ::before 偽元素]]]
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

偽元素的行為在大多數(shù)情況下類似於子元素。然而，一個(gè)重要的區(qū)別是，除了創(chuàng)建它的選擇器（或類似的選擇器，例如::before或::after ）之外，沒有其他選擇器能直接選中它。

例如，假設(shè)我們將容器設(shè)置為2x3 網(wǎng)格，每個(gè)子元素為藥丸狀設(shè)計(jì)：

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

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

如果沒有偽元素，效果如預(yù)期。但添加偽元素後，你會發(fā)現(xiàn)它參與了網(wǎng)格佈局，這可能出乎意料。偽元素通常用於裝飾性目的，參與內(nèi)容佈局顯得有些奇怪。

請注意， .container > *選擇器沒有使偽元素也變?yōu)樯罨疑?，因?yàn)槟銦o法通過這種方式選擇偽元素。這是另一個(gè)需要注意的小問題。

在日常開發(fā)中，偽元素通常使用position: absolute進(jìn)行裝飾性操作：

 .container::before {
  content: "";
  position: absolute;
  /* 裝飾性樣式*/
}

在這種情況下，你可能根本不會注意到偽元素的存在。雖然它在技術(shù)上仍然是子元素，參與了DOM結(jié)構(gòu)，但它不會參與網(wǎng)格佈局。這並非CSS Grid 獨(dú)有的現(xiàn)象，在Flexbox 中，偽元素也會成為Flex 項(xiàng)目。你可以隨意使用浮動或其他佈局方式來控制偽元素。

開發(fā)者工具清楚地顯示偽元素在DOM 中類似於子元素。

還有一些其他需要注意的問題：

其一是:nth-child()選擇器。你可能會認(rèn)為，如果偽元素是子元素，它們會影響:nth-child()計(jì)算，但事實(shí)並非如此。這意味著：

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

無論是否存在::before偽元素，都會選擇相同的元素。 ::after 、 :nth-last-child等選擇器也是如此。這就是標(biāo)題中“kinda”的原因。如果偽元素完全像子元素，它們會影響這些選擇器。

另一個(gè)問題是，你無法像選擇普通子元素那樣在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)

你是否遇到過其他關(guān)於偽元素的問題？

以上是有點(diǎn)提醒您偽元素是孩子，有點(diǎn)。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！