CSS :before/:after 选择器突然与父 div 分开放置

Question

我换了一台新电脑，突然间 CSS :after 和 :before 选择器不再工作。

真正奇怪的是，我之前在另一台计算机上添加的:before/:after 选择器在我的新计算机上完全正常显示。但是我现在添加的任何新代码都不会显示，即使我将旧代码复制并粘贴到新 div 上也是如此。

比如这个：

html

<div id="wtf"></div>

css

#wtf {
    width: 10px;
    height: 20px;
    background: red;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

此代码在复制并直接粘贴到小提琴中时有效：（http://jsfiddle.net/rLnrtu0x/）但我的本地浏览器上只显示红色框。无论我做什么，蓝色框都不会显示。所有其他 CSS 行为正常。

有人知道我做错了什么吗？

在 Ubuntu 14.04 上的 Mozilla 35.0.1 和 Chrome 42.0.2311.152（64 位）上测试。我不能在我的旧电脑上重新测试它，因为它坏了，但我以前从未遇到过:before/:after 选择器的问题。

更新

我刚刚和我的检查员一起找到了选择器。它们实际上正常显示，但它们的定位是相对于html，而不是它们的父 div。同样，使用我在计算机更改之前添加的代码，:before/:after 选择器相对于父 div 定位。但是新代码，即使它是复制粘贴的，也会相对于html 定位选择器。为什么会这样？

Answer 1

父容器需要有position

绝对定位的元素被定位在“相对于其最近定位的祖先或包含块的指定位置”。 （来源：MDN）

因此，您的 :after 伪元素未包含在其父元素中，因为父元素未“定位”或其位置设置为 static。

唯一的解释是，在您之前的设置中一定有一些东西将position 应用到#wtf，这使得它的孩子可以绝对定位在其中。

您可以通过将位置应用于#wtf 来“解决”问题，如下所示：

#wtf {
    width: 10px;
    height: 20px;
    background: red;
    position: relative;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

<div id="wtf"></div>

Answer 2

事实证明，它与计算机更改无关。 :before/:after 选择器实际上是显示的，但它们是相对于 html 而不是父 div 定位的，因为父 div 是绝对定位的。