css里content使用中文乱码,以及中文转unicode怎么在css样式里使用?

问题

比如:我们要使用伪类生成一段文字的时候,我们可以使用Unicode,下面用选择事项【上下切换,按回车确认】一段文字为例,我们用中文直接写的时候会出现下面乱码问题:

.test::before {
    content: '选择事项【上下切换,按回车确认】'
}

在这里插入图片描述

使用方法

先将选择事项【上下切换,按回车确认】转为 Unicode 编码

工具可以用这个网址https://www.bejson.com/convert/unicode_chinese/转换

输入中文:

在这里插入图片描述

点击中文转 Unicode

\u9009\u62e9\u4e8b\u9879\u3010\u4e0a\u4e0b\u5207\u6362\uff0c\u6309\u56de\u8f66\u786e\u8ba4\u3011

在这里插入图片描述

但是上面的不能直接使用css里

html, js和css如何使用unicode字符编码

在这里插入图片描述

根据上面的规则,我们应该没有 u

\9009\62e9\4e8b\9879\3010\4e0a\4e0b\5207\6362\ff0c\6309\56de\8f66\786e\8ba4\3011

.test::before {
    content: '\9009\62e9\4e8b\9879\3010\4e0a\4e0b\5207\6362\ff0c\6309\56de\8f66\786e\8ba4\3011'
}

在这里插入图片描述

总结

确保HTML、CSS文件使用 UTF-8 格式,并且HTML文档也使用 UFT-8 的字符编码格式,即HTML文档的meta信息包含 <meta charset="UTF-8">

避免在 CSS 的 :before, :after 中使用中文,如果一定要使用,可以使用中文对应的 Unicode

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凯小默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值