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

【问题标题】：Why is it impossible to change content in css?为什么无法更改 css 中的内容？
【发布时间】：2012-07-14 00:27:02
【问题描述】：

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

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!

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

Answer - 我正在查看 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 内容属性）

【问题讨论】：

CSS 主要用于将文档内容（用 HTML 或类似标记语言编写）与文档表示分离，包括布局、颜色和字体等元素。
@pylover 你一定弄错了。 W3c 是参考。我想你的意思是 w3school。
是的，抱歉，我会删除我的评论
IE8 确实在 CSS2 中为 :before 和 :after 实现了 content 属性。它只是不理解 CSS3 双冒号::before 和::after。

标签： css w3c

【解决方案1】：

正如规范所指定的 content: 只能与 *pseudo-elements :before 和 :after 一起使用，恐怕没有比这更好的答案了。

12.2 The 'content' property

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

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

CSS 并不是一种提供新内容的方式，它是一种格式化现有内容的方式。

“您不应该使用 CSS 更改任何内容，仅此而已。:before 和 :after 伪元素已经讨论过了非常频繁，因为它们打破了格式和内容之间的障碍。” - refp

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

想出一个在格式和内容之间仍然有明确界限的可用替代方案将非常困难（而且令人沮丧），所以这是（至少在我看来）我可以接受的中间道路它。

_{我必须承认，当它们第一次出现时，我并不是这些伪元素的忠实粉丝。}

【讨论】：

我可以理解这将是一种可怕、可怕、可怕的做法；新手会在任何地方使用它，等等。我同意这不是 CSS 的意义所在。然而，我认为它是一个很棒的功能有两个原因。 1/ CSS 不是一种提供新内容的方法，但有一个content 允许完全执行 CSS 不应该执行的操作。我们可以像content 一样做，但是在 HTML 中，这是正确的方法。 2/ 这对于一些每一个蓝月亮的小黑客来说非常有用。例如，我正在处理我的博客布局，我很沮丧，因为我无法更改硬编码 HTML 的内容。对吗？
您不应该使用 CSS 更改任何内容，除此之外没有那么多。 :before 和 :after 伪元素 已被频繁讨论，因为它们打破了格式和内容之间的障碍。
content() 可以在 Chrome 19+ 中使用（我认为）覆盖图像的src：content: url(http://example.com/path/to/image.png);
我认为它的方式很有帮助。以 micro clearfix 为例，您无需在 html 结构中添加新元素即可使用它。而且我认为还有其他方法，例如从脚本中获取文本、手动编辑该部分或使用 javascript 更改“硬编码”的 HTML 部分。但首先仍然是一个好问题。

【解决方案2】：

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

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

【讨论】：

准确！我在 css 2.1 规范上，我的错。
是的。该模块的下一个（2012 年）版本说“过时......没有积极维护......不用于实现”。太遗憾了，2003 版本中有一些破解的东西。我们迫切需要::outside 来为我们节省所有这些包装器<div>s。

【解决方案3】：

实际上可以直接在元素上使用content 属性，而不仅仅在伪元素上。试试

   p { content:'My hero is' }

在 Opera 中，您会看到想要的结果。问题是其他浏览器还不支持它。

在CSS3 Generated and Replaced Content Module 中可以找到很多关于生成内容猫的其他有趣的东西，但我们必须等待浏览器供应商实现它。

【讨论】：

也是。我将 Jukka 的答案标记为正确，但您也是正确的（对此感到抱歉）