请教一下 css 里&&&&这个连续 4 个&的写法

天天写 css 的摸鱼仔表示不理解

也没见过 &&&&

https://juejin.cn/post/6844903668781678600
翻到一篇掘金的描述，里面用到了&&提权

原生 css 没有这个语法，应该是 scss 的，&表示父级，加四个&&&&我也不太能理解

https://www.tutorialspoint.com/less/multiple.htm

这个 less 也支持

By using the & operator, it is possible to refer a parent selector repeatedly without using its name. Within a selector & can be used >>>>>more than once<<<<<.

2 个&偷懒可以理解 4 个&建议打死比较好

@murmur 感谢大佬

我这个半吊子前端表示根本没见过这种写法

没见过这种写法，建议打死

等你见到&&&&&甚至&&&&&&的写法时，就会见怪不怪了

数字会膨胀 就像 z-index: 10000000000000000;

https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

建议先看看项目中基础库的用法，不过&在 sass 中也挺常见的

css 选择器超过两级就是失败。写出好几层选择器来搞所谓的覆盖就是失败中的失败。

https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
这里是正解，确实是通过生成多个重复的 class 来影响优先级，感觉这玩意儿有没有用完全看浏览器的渲染实现啊，不过貌似应该是都有效，不然文档也不会这么写。

How can I override styles with higher specificity?

The way to override styles with a high specificity is to simply increase the specificity of your own styles. This could be done using !important, but that's error prone and generally not a good idea.

We recommend the following technique:


const MyStyledComponent = styled(AlreadyStyledComponent)`
&&& {
color: palevioletred;
font-weight: bold;
}
`
Each & gets replaced with the generated class, so the injected CSS then looks like this:


.MyStyledComponent-asdf123.MyStyledComponent-asdf123.MyStyledComponent-asdf123 {
color: palevioletred;
font-weight: bold;
}
The repeated class bumps the specificity high enough to override the source order without being very tedious to write!

后端看了瑟瑟发抖

@Xusually 感谢#13，这个 FAQs 描述的确实详细🤞

楼上都说了，主要是为了提权，但是四个&我也确实没见过

@Xusually 这样的意义在哪里，单纯的提权不是有 important 给你用么，还是规划烂到谁长谁说了算

这写法感觉还不如 important

无限覆盖，这样写也太蛋疼了