csscontent属性是否因为css是为了展示而不是生成内容而打破了内容和分隔的规则？
css content 属性还有哪些其他好的用途？我只在clearfix hacks 中看到过。
【问题讨论】：
标签： css
css“内容”属性是否因为css是为了呈现而不是生成内容而打破了内容和分离的规则？
好点。如果它用于实际数据，我会说它确实如此。
The quirksmode page 在内容上很好地显示了限制。您目前无法添加任何样式的内容 - 它适用于太少的浏览器。您只能添加字符数据。
quirksmode 的作者发表了一个有趣的观点：
我觉得我们根本不应该使用内容声明。它向页面添加内容，而 CSS 旨在向页面添加演示文稿，而不是内容。因此，我觉得如果你想动态生成内容，你应该使用 JavaScript。 CSS 不适合这项工作。
我总体上同意这一点，但有时您可能不想依赖 JavaScript 来完成这项工作。 Martin 展示的逗号示例是我发现使用 content 合理的情况（尽管如果逗号已经从服务器端提供，我个人会感觉更好 - 这是我个人会坚持的。）
另外，请记住，当从其他地方（例如在搜索结果页面中）查看您的内容时，通过 content 属性添加逗号和引号可能看起来很糟糕。
我会说，如果你真的需要它，请尽量少用它。
【讨论】：
它适用于结构化内容。我为 W3C 的下一个打印 CSS 规则编写了许多测试用例，我觉得很酷的一个是能够将“章节”之类的东西放入某些元素中，尤其是与 counters 配对时。一个简单的例子是这样的：
li.chapter:before {content: "Chapter" counter(chapter) ": ";}
这些都不是特定于打印的，都是演示信息。如果您不希望您的章节以“Chapter”一词开头，请将其从 CSS 中删除。在样式表中进行控制意味着您的打印版本可能具有与屏幕版本不同的章节标题，您的移动设备可能再次不同，而无需了解应用程序逻辑中的查看器设备。
【讨论】：
something | something | something，而无需更改我的代码。 “适合工作的工具”。
它可以用于打印样式表以显示链接的 url，例如：
p a:after {
content: " (" attr(href) ")";
}
一些链接（http://www.somesite.com）
【讨论】：
我正在使用它在管理面板菜单中显示 accesskey
.menu a[accesskey]:after { content:' [' attr(accesskey) ']'; }
【讨论】：
CSS 是表示数据。任何仅与演示相关的内容都可以在 CSS 文件中使用。例如，假设我想将« 和» 放在我的<h1> 标签周围；这纯粹是展示性的。您可以使用 :before 和 :after 选择器来实现。
另外需要注意的是content也可以显示图片：
content: url('my/image.png');
我想补充一点，我认为使用 content 属性覆盖现有内容是一种非常糟糕的做法。
【讨论】：
Your browser does not support content.（Windows 7）。不过可以在 Chrome 上运行。
:before 和:after。我刚刚测试了 quirksmode 页面，它也失败了；但是在我使用上述选择器的本地测试中，一切顺利。 （此处为 Mac OS。）
我看到它的一个常见用途是与 :before 和 :after 标签一起使用某种程式化的报价框来格式化报价。它可以是一种快速简便的方法来获取您本来可以用来构建图像的风格化元素。
blockquote:before, blockquote:after {
content: '"';
}
我认为这是一个很好的用途，因为它并没有真正打破内容和样式分离的规则。我的感觉是，如果它是页面设计的一部分，而不是内容，那么对于内容来说可能还可以：
【讨论】：
content？
一个有趣的用例是 contenteditables 上的占位符文本，虽然可能不推荐。
[contenteditable]:empty:after
{
color: #aaa;
content: 'Enter some text';
}
【讨论】：
像zneak said一样，也可以替换图片。我发现在 iPhone 4 和其他每个虚拟像素具有多个实际像素的设备上，用更高分辨率的变体替换“内容图像”（而不是“资产图像”，应该通过 css 背景图像完成）是切实可行的。
E. g.：
<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
@media all and (-webkit-min-device-pixel-ratio: 2) {
/* e. g. iphone 4 */
#people9 { content: url(//lorempixum.com/400/300/people/9/); }
}
它至少可以在 iPhone 4 和 Android Nexus S 上运行，但我认为它是实验性的，还没有在其他设备上测试过。这是一个完整的例子：
【讨论】：
我只是想补充已经说过的话。
使用层叠样式表，您可以将样式应用于多种类型的文档。
常见的用例是将 CSS 应用于 HTML 页面。在这种情况下，一般的想法是仅将content 属性用于美学目的。
另一个用例是将 CSS 应用于 XML 文档。在这种情况下，文档通常不包含页面结构元素（div、h1 等）。所以，在这种场景下，通过更频繁地使用content CSS 属性，可以更好地定义页面以及元素与数据之间的关系。
例如，您可以在表格前添加描述段落，或在人名后添加电子邮件地址。请注意，在 HTML 页面中，这些页面结构元素应该是 HTML 文档本身的一部分，而它们通常在 XML 文档中被省略，因此可以使用 content CSS 属性添加它们。
【讨论】：
一个有趣的用例是用户界面的本地化。
【讨论】：