为什么不能改变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规范表明它是可能的,即使没有::after和::before伪选择.但并非每个浏览器都实现它.

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

Answer 1

作为该规范的规定content:只能用于连同*伪元素:before和:after,没有比我害怕一个更好的答案.

12.2"内容"属性

此属性与:before和:after pseudo元素一起使用以在文档中生成内容.

但是,如果问题应解释为什么我们不允许在任何我们喜欢使用CSS的地方添加内容？答案只是理论上的,但很简单:

CSS并不是一种提供新内容的方式,它是一种格式化现有内容的方法.

"你不应该使用CSS改变任何内容,除了它之外没有那么多.:before而且:after 伪元素已经被频繁讨论,因为它们打破了格式化和内容之间的障碍." - refp

:before/ :after是一个很好的资源,因为它们允许您以一种在出现之前无法实现的方式格式化数据.请注意,我使用"格式"一词,因为我仍然认为它是格式化程序,而不是数据生成器.

提出一个可用的替代方案,在格式化和内容之间仍然有明确的界限,这将是非常困难的(并且令人沮丧),所以这是(至少根据我)一个可以接受的中间路线,我可以忍受它.

_{我必须承认,当他们第一次出现时,我不是那些伪元素的忠实粉丝.}

Answer 2

引用的CSS 2.1规范说:"适用于:: before和:after伪元素".CSS3生成和替换内容模块的草案放宽了这一限制,该模块已经过时(2003年),过时但仍部分实施.Opera似乎支持content普通元素,除了使用URL值(用于插入图像),而Chrome和Safari 仅对 URL值执行相同操作.所以你的代码实际上适用于Safari.

除非对模块的规范工作取得一些进展,否则不太可能提供更广泛的支持.在W3C CSS模块状态页面上,模块位于"重写"部分,注释为"严重过时".