：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: absolute;
top:500px;
width:400px;
border:1px solid green;
}
.parent:before {
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
.child {
Color:black;
border:1px solid black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Hello I am child</div>
</div>
</body>
</html>
我正在尝试创建一个透明的背景，如此主题所述：How to set opacity in parent div and not affect in child div?。
查看第4个答案的代码。这是如何工作的，我对使用.parent和.parent:before感到困惑。我认为这会在每个父元素之前创建一个.parent:before元素。真的很困惑这是如何工作的？
答案 0 :(得分：1)
:before使用CSS创建虚拟内容，因此在上述情况下，作者使用下面的代码段
.parent:before{
z-index:-1;
content:'';
position:absolute;
opacity:0.5;
width:400px;
height:200px;
background-image:url('wallpaper324845.jpg');
border:1px solid red;
}
他正在使用:before创建一个虚拟元素，然后定位absolute，指定一些维度，并指定background，以确保它保持在{{1}以下}}内容，他使用div
换句话说，z-index: -1;，:before只是假设在:after内嵌入两个span元素，但是使用div元素，不需要pseudo，因为你可以用伪元素实现同样的目的。
考虑你有这样的事情
span也可以使用<div>
Hello
<span></span>
</div>
div {
position: relative;
}
div span {
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
或:before来实现，标记保持不变但CSS就像
:after因此，它只会在HTML中为您保存一个空元素，但如果您查看上面的CSS，则使用与div {
position: relative;
}
div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #f00;
z-index: -1;
left: 0;
top: 0;
}
关联的始终的content属性或:before，是的，即使你把它留空，也是必需的。
另请注意，:after和:before生成的内容内联，因此为了使:after，height正常工作，您需要如果你想让它成为 block 级别，请明确提及width或display: block;，但在这种特殊情况下，你不需要那样，因为伪元素位于{{1 }}
display: inline-block;所以请将其设为absolute或div:after {
content: "Hello";
margin-top: 20px; /* This wont work as pseudo is inline by default */
}
答案 1 :(得分：1)
作者使用：before和：after伪元素指定生成内容的样式和位置。正如其名称所示，：before和：after伪元素指定元素文档树内容之前和之后的内容位置。 'content'属性与这些伪元素一起指定插入的内容。
下面是一个以HTML为根的文档树。
HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI
例如，以下规则在“class”属性的值为“note”的每个P元素的内容之前插入字符串“Note：”：
p.note:before { content: "Note: " }
由元素生成的格式化对象（例如，框）包括生成的内容。因此，例如，将上面的样式表更改为：
p.note:before { content: "Note: " }
p.note { border: solid green }
会导致在整个段落周围呈现纯绿色边框，包括初始字符串。
：before和：after伪元素从文档树中的元素继承任何可继承的属性。
例如，以下规则在每个Q元素之前插入一个开放引号。引号的颜色为红色，但字体与Q元素其余部分的字体相同：
q:before {
content: open-quote;
color: red
}
在a：before或：after伪元素声明中，非继承属性采用其初始值。
因此，例如，因为'display'属性的初始值是'inline'，所以前一个示例中的引用作为内联框插入（即，与元素的初始文本内容在同一行）。下一个示例将'display'属性显式设置为'block'，以便插入的文本成为块：
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
：之前和之后：伪元素元素与其他框（例如，输入框）交互，就好像它们是在关联元素内部插入的真实元素一样。
例如，以下文档片段和样式表：
<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: 'Some'; }
...将以与以下文档片段和样式表完全相同的方式呈现：
<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }
同样，以下文档片段和样式表：
<h2> Header </h2> h2 { display: run-in; }
h2:after { display: block; content: 'Thing'; }
<p> Text </p>
...将以与以下文档片段和样式表完全相同的方式呈现：
<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
<p> Text </p>
答案 2 :(得分：0)
基本上，:before（如：after）是一个CSS伪元素。所以它几乎就像一个HTML内联元素。几乎。
要使用伪元素，您需要为其指定content属性（大多数情况下为空字符串）。请注意，默认情况下它是内联元素，因此它不能具有宽度/高度。您需要设置display: block（或内联块或其他）。
我认为您错过了在父元素（.parent）上设置relative位置。那是：
.parent{
position: relative;
top:500px;
width:400px;
border:1px solid green;
}
答案 3 :(得分：0)
试着看看这篇文章。它解释了如何：在伪选择器工作之前和之后：