Question

有一个例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
    DIV#outer {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    DIV#inner {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: green;
    }
    DIV#inner:before {
        display: inline-block;
        content: '123';
        background-color: red;
    }

</style>

</head>

<body>
<div id="outer">
    <div id="inner">

    </div>
</div>
</body>
</html>

'＃inner：before'pseudoelement'在'#inner'中呈现。为了使它在外面呈现，我需要用'DIV＃outer：before'替换最后一个css块中的选择器，因此它将在'#outer'中呈现，但在'#inner'之前。问题是我为什么观察这种行为？ w3schools表示“The：before选择器在所选元素之前插入内容”。在元素之前，但不在元素的内容之前。

Answer 1

w3schools notoriously inaccurate和附属于W3C。

从CSS 2.1 spec（强调添加）：

作者用。指定生成内容的样式和位置：before和：after伪元素。正如他们的名字所示，：before和：after伪元素指定内容的位置在元素的文档树内容之前和之后。

Answer 2

W3Schools is wrong often.在这种情况下，这是错误的。 :before并且它的对应:after应该在相关元素内部，但在其中的任何内部之前和之后。

MDN就是这样说的：

：在创建一个伪元素之前，该元素是匹配元素的第一个子元素。通常使用content属性将化妆品内容添加到元素。默认情况下，此元素是内联的。

为什么：在内容之前呈现伪元素之前，而不是元素？

2 个答案: