CSS-in-JS中伪类需用库特定语法：Emotion/Styled Components用&:hover，JSS用hover: { color: 'red' }；伪元素同理，&::before或before: { content: '"★"' }；&不可省略，否则丢失作用域。
伪类在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对象直传）：根本无法表达伪类，得换方案或回退到标签
伪元素如::before在样式对象里怎么声明
和伪类一样，不能直接写::before作为对象键。伪元素需要更严格匹配宿主元素结构，且部分库对双冒号支持不一致。
典型坑是写{ '::before': { content: '"•"' } }——这在Emotion里会被当普通属性忽略，在Styled Components里甚至可能触发编译警告。
- Emotion/Styled Components：用
&::before，content值必须是字符串且带引号，比如content: '"★"' - JSS：用
before: { content: '"★"' }，同样要求content为字符串字面量 - 注意
content值为空字符串时要写content: '""'，不能写content: ''（会被当成无效值）
为什么&在Emotion里不能省略
因为&是作用域锚点，告诉库“这个伪类/伪元素属于当前组件对应的DOM节点”。没它，生成的CSS规则会丢失上下文，变成全局污染或完全不生效。
比如写{ '&:hover': { opacity: 0.8 } }，最终生成的是类似.css-abc123:hover { opacity: 0.8 }；如果漏掉&，有些库会尝试生成:hover { opacity: 0.8 }，结果所有元素都响应hover。
- 在keyframes动画里也一样，
&决定动画绑定到哪个元素 - 嵌套层级深时，
&&可表示“当前元素的子元素”，但&本身不可少 - 用Babel插件（如
@emotion/babel-plugin）时，&还参与哈希计算，影响样式复用
动态伪类状态（如:focus-visible）兼容性怎么处理
:focus-visible这类较新的伪类，在旧版Chrome/Firefox里不支持，而CSS-in-JS不会自动加前缀或降级。直接写&:focus-visible会导致老浏览器忽略整条规则，但不会报错。
这不是CSS-in-JS本身的缺陷，而是底层CSS引擎限制。你得自己判断是否值得为它增加polyfill或备用逻辑。
- 可以配合
@supports做特性检测：@supports selector(:focus-visible) { &:focus-visible { outline: 2px solid blue; } } - Emotion支持
css函数内嵌@supports，但Styled Components需用injectGlobal或额外 - 别指望
autoprefixer处理伪类——它只管属性前缀，不碰选择器
事情说清了就结束。伪类和伪元素不是“写进去就能用”，关键在理解CSS-in-JS库怎么把JS结构映射成CSS选择器链，以及它在哪一步做了转换、哪一步交给了浏览器原生解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
