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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1228 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

这样的用法。

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

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

还请 v 佬们解惑

解惑

小鸡

类名

外话

19 条回复 • 2023-02-24 09:22:52 +08:00

FFFFourwood

2021-08-12 10:35:33 +08:00

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

FFFFourwood

2021-08-12 10:35:53 +08:00

也没见过 &&&&

devwolf

2021-08-12 10:37:47 +08:00

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

renmu123

2021-08-12 10:42:09 +08:00 via Android

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

murmur

2021-08-12 10:45:21 +08:00

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

2021-08-12 10:46:43 +08:00

@murmur 感谢大佬

sadfQED2

2021-08-12 10:48:02 +08:00 via Android

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

liyang5945

2021-08-12 11:30:54 +08:00

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

robinlovemaggie

2021-08-12 12:24:12 +08:00

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

momocraft

2021-08-12 12:40:09 +08:00

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

dcatfly

2021-08-12 12:43:23 +08:00

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

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

ChefIsAwesome

2021-08-12 12:56:08 +08:00

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

Xusually

2021-08-12 13:09:35 +08:00

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!