瞭解：之後和：之前

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

瞭解：之後和：之前

回答

相關問題