CSS-in-JS中伪类与伪元素的写法

在CSS-in-JS中，伪类（如:hover）和伪元素（如::before）无法像传统CSS那样直接书写，必须遵循各库特定的语法规范——Emotion和Styled Components依赖`&`锚点实现作用域绑定，写成`&:hover`或`&::before`，而JSS则采用驼峰键名如`hover: { ... }`或`before: { ... }`；漏掉`&`会导致样式全局污染或失效，错误地使用`{ ':hover': { ... } }`等纯对象写法更会被静默忽略或报错；此外，`content`值需严格为带引号的字符串，动态伪类如`:focus-visible`还需借助`@supports`手动做兼容性兜底——真正掌握它们，关键在于理解CSS-in-JS如何将JS结构安全、精准地映射为浏览器可解析的CSS选择器链。

伪类在CSS-in-JS中怎么写:hover这类选择器

不能直接在样式对象里写:hover，因为JS对象键名不支持冒号。主流方案是用嵌套语法（如Emotion、Styled Components）或数组式写法（如JSS），本质是让库识别出这是伪类规则，再生成对应CSS。

常见错误是写成{ ':hover': { color: 'red' } }——多数CSS-in-JS库不认这种纯对象嵌套，会静默忽略或报错。

• Emotion/Styled Components：用&:hover，注意前面的&必须存在，它代表父选择器
• JSS：用hover: { color: 'red' }，键名是驼峰形式，不是字符串':hover'
• Vanilla CSS-in-JS（如style对象直传）：根本无法表达伪类，得换方案或回退到