伪选择器在样式组件中的工作方式与在具有 unicode 字符的 css 中的工作方式相同吗答案

【问题标题】：Do psuedo selectors work in styled-components the same as in css with unicode characters伪选择器在样式组件中的工作方式与在具有 unicode 字符的 css 中的工作方式相同吗
【发布时间】：2017-10-22 07:49:03
【问题描述】：

我有以下样式组件，我正在尝试添加一个 unicode 字符 \00d7 作为伪选择器的内容，它是一个十字或关闭图标。

但是，这似乎不像在 css 中那样工作。当然，我可以为这个关闭图标使用 svg 作为替代方案，我只是好奇这是否可以通过 styled-components 实现？它似乎允许空白的伪选择器，例如''

const Close = styled.span`
  color: pink;
  &:before {
    content: '\00d7';
  }
`

【问题讨论】：

是在所有浏览器或任何特定浏览器中都观察到此问题吗？
尝试使用'\d7'
我不确定这是否是答案，没有使用过技术，但从基本的 JavaScript 角度来看，你在字符串中有一个字符串。因此，在外部字符串的第一遍，转义字符将被解释为 JS。即，一个空字符（\0）后跟三个字符。我建议转义反斜杠，即content: '\\00d7';。
不幸的是，'\d7' 或 '\\00d7' 都不起作用，并且所有浏览器都存在此问题。
双反斜杠对我有用。用于处理样式组件的单个反斜杠。不知道他们在这里改变了什么。

标签： javascript css reactjs styled-components

【解决方案1】：

尝试更新参考：

content: '&times;';

https://brajeshwar.github.io/entities/ 上提供了其他替代编码格式。

【讨论】：

不幸的是，这不起作用。然而有趣的是，将符号复制粘贴到：content: '×'; 确实有效。所以谢谢你的链接。

【解决方案2】：

我认为你需要两个 cmets 的组合：

content: "\\d7"

这对我有用。

【讨论】：

这应该是公认的答案。

【解决方案3】：

看看是不是引号的问题

content: '"\\00d7"'

我在使用带有三元运算符的道具时遇到了这个问题

【讨论】：