CSS-in-JS中伪类与伪元素的写法
2026-05-16 18:26:32
0浏览
收藏
在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对象直传）：根本无法表达伪类，得换方案或回退到
