有一個例子。爲什麼在僞元素呈現在內容之前,而不是元素?
<!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:之前'pseudoelement被渲染到'#inner'裏面。爲了讓它在外部渲染,我需要用'DIV#outer:before'來替換上一個css塊中的選擇器,所以它會在'#outer'內但在'#inner'之前呈現。問題是我爲什麼要觀察這種行爲? w3schools表示「之前:選擇器在所選元素之前插入內容」。在元素之前,但不在元素的內容之前。
謝謝! Google將w3school放在最前面。下次會閱讀規格。 – mixel
@mixel:該規格是一個非常乾燥的閱讀。 MDN文檔非常好,並始終保持最新狀態:https://developer.mozilla.org/en/CSS_Reference –