你能在 CSS“内容”属性中使用 HTML 实体吗？ [复制]

Posted 2023-03-05

【中文标题】你能在 CSS“内容”属性中使用 HTML 实体吗？ [复制]

【英文标题】：Can you use HTML entities in the CSS “content” property? [duplicate]

【发布时间】：2011-11-06 14:51:00

【问题描述】：

我想在 CSS 中使用 html 实体，但它向我显示了 •。

.down:before
    content:"• ";
    color:#f00;

另外，为什么上面的代码不能在 IE 中运行？它根本不显示之前的部分。

【问题讨论】：

您希望用户在他们的屏幕上看到• 而不是 • 字符？

我希望用户看到的是 • 而不是 •东西。 *** 转换了我的 html 实体；）

哪个版本的IE？ 7 及以下版本完全不支持伪元素（:before, :after），8 版本仅部分支持。

jsfiddle.net/Kyle_Sevenoaks/xRJmT 在 Chrome 中看起来不错。 IE 不支持伪选择器 :before.

【参考方案1】：

假设您希望用户看到•，您可以简单地转义该序列，给出：

.down:before
    content:"\• ";
    color:#f00;

至于为什么在 IE7 上不可见，那是因为 IE 不支持生成的内容或 :before 选择器。

编辑提供，要查看实际的项目符号字符，您应该使用：

.down:before
    content:"\2022";
    color:#f00;

JS Fiddle demo.

【讨论】：

不抱歉，如果我的问题表述不当，我希望他们看到点字符。 *** 获取实体并对其进行转换。

@DavidThomas 不客气 =)

【参考方案2】：

你需要逃避你的实体：

.down:before
    content:"\• ";
    color:#f00;

你在 IE 上看不到它，因为IE doesn't support :before (not :after)

【参考方案3】：

我猜您希望显示实际的 • 字符，如果是这样，只需使用 • 字符而不是 •。

示例：http://jsfiddle.net/rmjt8/

编辑：我找到了另一个帖子：How can I include a HTML-encoded "content:" character in CSS?

也许这会验证：

.down:before
    content:"\2022 ";
    color:#f00;

【讨论】：

我之前有过，但后来它没有验证。

啊抱歉，我有一段时间没有验证我的 CSS 了；）。只要它是跨浏览器并且我的 Sass 生成，我就是一个快乐的露营者。

@clamp：你得到什么验证错误？我将 odin 的代码粘贴到 jigsaw.w3.org/css-validator/#validate_by_input 中，验证正常。

我使用了 utf-8 编码，它说点是无效字符。

@clamp：点是无效字符是什么意思？ W3C 的 CSS 验证器说没问题。

【参考方案4】：

像这样输入你的子弹特殊字符的十六进制值

div:before
    content:"\2022";
    color:#f00;

检查这个小提琴http://jsfiddle.net/sandeep/HPrkU/1/

注意：在 IE8 中工作前后

【讨论】：

太好了，谢谢！关于 IE：那可能是我这边的另一个问题。该类附加到一个 li 元素。

如果 :before 在 IE8 中不起作用。然后检查您的文档类型。将此 放入您的 html

... 其中“十六进制值”表示“十六进制 Unicode 代码点”。

...如果您手头/剪贴板中只有那些 unicode 符号本身，或十进制 html 实体或，或，或...。rishida r12a unicode converter 是您最好的朋友。 （曾经）