小提示:伪元素是子元素,吧。
请看下列代码,一个有若干子元素的容器:
<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、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。