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

[devwolf]

[题外话] ：离开黑厂后待业了一个多月，总算进了新公司，小鸡啄米一样的啃了一周熟悉项目，没啥进展 （ orz 自从进了黑厂至今就一直没空上 v 站）

[问题描述] ： 新公司使用了 mobx 和 styled-components 和 storybook，对我而言都是新花样。 项目里对于 styled-components 的使用，有个看上去不怎么重要的问题，忍到今天总算开“金口”问了主管（想问的东西太多了，越问越不好意思）

项目里经常看到 &&&&::-webkit-scrollbar, &&&& *::-webkit-scrollbar { }

这样的用法。

[主管的解惑] “本身这一层的类名多加几遍，是为了提权覆盖用的”

作用知道了，但是相关知识点的搜索完全没有头绪，也许用错了关键词。

还请 v 佬们解惑

[FFFFourwood]

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

[FFFFourwood]

也没见过 &&&&

[devwolf]

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

[renmu123]

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

[murmur]

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 个&建议打死比较好

[devwolf]

@murmur 感谢大佬

[sadfQED2]

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

[liyang5945]

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

[robinlovemaggie]

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

[momocraft]

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

[dcatfly]

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

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

[ChefIsAwesome]

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

[Xusually]

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!

[admol]

后端看了瑟瑟发抖

[devwolf]

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

[cheese]

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

[murmur]

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

[CokeMine]

这写法感觉还不如 important

[gdrk]

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