css - 为什么无法更改 css 中的内容？

Question

CSS2.1 伪选择器，例如 ::after 和 ::before 允许向页面添加文本内容。例如:

CSS

 p:after { content:' Batman!' }

HTML

<p>Na Na Na Na Na Na</p>

在浏览器中输出

Na Na Na Na Na Na Batman!

---

对于相同的 HTML 源代码，我的问题是为什么这 一段 CSS

 p { content:'My hero is' }
 p:after { content:' Batman!' }

不输出这个

My hero is Batman!

而是输出这个 ?

Na Na Na Na Na Na Batman!

---

关于内容属性的 w3c 规范:http://www.w3.org/TR/CSS21/generate.html#propdef-content

---

回答 - 我正在查看 CSS2.1 规范。 CSS3 spec indicates即使没有 ::after 和 ::before 伪选择器也是可能的。但并非每个浏览器都实现了它。

• Chrome 20.0.1132.57:否
• Opera 12.00 r1467:是
• Safari 5.1.7 (7534.57.2):否
• IE 8.0.7601:否(甚至未实现 CSS2 内容属性)

Answer 1

引用的 CSS 2.1 规范说:“适用于::before 和 :after 伪元素”。 CSS3 Generated and Replaced Content Module 的草案放宽了这一限制。 , 这是旧的 (2003) 和过时的但仍部分实现。 Opera 似乎支持普通元素的 content，除了使用 URL 值(用于插入图像)，而 Chrome 和 Safari 仅对 URL 值执行相同的操作。所以您的代码实际上可以在 Safari 上运行。

除非模块的规范工作取得一些进展，否则不太可能获得更广泛的支持。关于 W3C CSS module status page ，该模块位于“重写”部分，注释为“严重过时”。