了解：之后和：之前

http://jsfiddle.net/BtGRt/了解：之后和：之前

为什么内容出现在div内？不是左/右（之前/之后）div？

来源

2012-02-27 Shawn Taylor

因为这就是规范说的。 – BoltClock 2012-02-27 14:14:01

因为:after和:before不会在它们附着的元素之后或之前添加psuedoelements;他们在该元素的内容之后或之前添加它们。

查看here的技术细节 - 生成的元素是匹配元素的最后一个/第一个子项。

来源

2012-02-27 14:14:40 Chowlett

看着the spec，你可以看到它们是相对于内容而不是元素插入的。

正如其名称所表明的：before和：after伪元素指定的内容位置之前和元素的文档树内容后。

的：前和：后伪元素从在文档树中的元素 继承任何可继承属性其中它们附着到。

例如，以下规则在每个Q元素之前在之前插入一个开引号。引号的颜色将为红色，但字体将与其余Q元素的字体相同：

q：before {content：open-quote;颜色：红色}

来源

2012-02-27 14:17:15 scottheckel

'背景'[不可继承]（http://www.w3.org/TR/CSS2/colors.html#propdef-background-color）。您应该在“同样来自规范”之前删除答案中的所有内容。 – thirtydot 2012-02-27 14:51:05

默认情况下，不*继承*，直到你明确指定'background-color：inherit'，但那是在点旁边... – BoltClock 2012-02-27 15:09:15

@thirtydot完全不是我第一句话的意思。这是措辞不佳，因为我只是指包含所有内容的div，并不是指造型。我把所有内容都放进去之后，我对规格内容加了粗体，并没有考虑放置。 – scottheckel 2012-02-27 15:48:55

将'content'与after：：before结合使用时，它会在现有内容之前或之后添加内容。所以，在div内。如果你想分析整个div的附加内容，你需要类似

<div id="w"> 
<div id="f">World </div> 
</div> 


#w:before{  
background: yellowgreen; 
content: "Hello "; 
} 
#f{ 
width: 200px; 
height: 200px; 
background: gold; 
margin: 100px; 
padding: 100px; 
} 
#w:after{  
background: burlywood; 
content: "StackOverflow"; 
}

来源

2012-02-27 14:19:22 NekaraNef

了解：之后和：之前

回答

相关问题