CSS:在/之后,选择器突然与父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选择器问题.

UPDATE

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

Answer 1

父容器需要有 position

绝对定位的元件"位于相对于其最近定位的祖先或包含块的指定位置".(src: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>