4

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但并不是每个浏览器都实现了它。

  • 铬 20.0.1132.57：否
  • Opera 12.00 r1467：是的
  • Safari 5.1.7 (7534.57.2)：否
  • IE 8.0.7601：否（甚至没有实现 CSS2 内容属性）
4

3 回答 3

5

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

12.2 “内容”属性

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

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

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

“你不应该使用 CSS 更改任何内容，除此之外没有那么多。:before和:after 伪元素已经被经常讨论，因为它们打破了格式和内容之间的障碍。” - 参考

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

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

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

于 2012-07-14T09:33:50.037 回答
5

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

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

于 2012-07-14T09:55:42.370 回答
1

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

   p { content:'My hero is' }

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

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

于 2012-07-14T09:49:43.460 回答