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

2021-08-12 10:31:27 +08:00
 devwolf

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

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

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

这样的用法。

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

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


还请 v 佬们解惑

2827 次点击
所在节点    CSS
19 条回复
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
原生 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
我这个半吊子前端表示根本没见过这种写法
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!
admol
2021-08-12 13:12:48 +08:00
后端看了瑟瑟发抖
devwolf
2021-08-12 13:29:19 +08:00
@Xusually 感谢#13,这个 FAQs 描述的确实详细🤞
cheese
2021-08-12 13:43:07 +08:00
楼上都说了,主要是为了提权,但是四个&我也确实没见过
murmur
2021-08-12 14:14:16 +08:00
@Xusually 这样的意义在哪里,单纯的提权不是有 important 给你用么,还是规划烂到谁长谁说了算
CokeMine
2021-08-12 19:06:44 +08:00
这写法感觉还不如 important
gdrk
2023-02-24 09:22:52 +08:00
无限覆盖,这样写也太蛋疼了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/795265

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX