V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
devwolf
V2EX  ›  CSS

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

  •  
  •   devwolf ·
    yctjb1 · 2021-08-12 10:31:27 +08:00 · 2565 次点击
    这是一个创建于 959 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    这样的用法。

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

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


    还请 v 佬们解惑

    19 条回复    2023-02-24 09:22:52 +08:00
    FFFFourwood
        1
    FFFFourwood  
       2021-08-12 10:35:33 +08:00
    天天写 css 的摸鱼仔表示不理解
    FFFFourwood
        2
    FFFFourwood  
       2021-08-12 10:35:53 +08:00
    也没见过 &&&&
    devwolf
        3
    devwolf  
    OP
       2021-08-12 10:37:47 +08:00   ❤️ 1
    https://juejin.cn/post/6844903668781678600
    翻到一篇掘金的描述,里面用到了&&提权
    renmu123
        4
    renmu123  
       2021-08-12 10:42:09 +08:00 via Android
    原生 css 没有这个语法,应该是 scss 的,&表示父级,加四个&&&&我也不太能理解
    murmur
        5
    murmur  
       2021-08-12 10:45:21 +08:00   ❤️ 1
    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
        6
    devwolf  
    OP
       2021-08-12 10:46:43 +08:00
    @murmur 感谢大佬
    sadfQED2
        7
    sadfQED2  
       2021-08-12 10:48:02 +08:00 via Android
    我这个半吊子前端表示根本没见过这种写法
    liyang5945
        8
    liyang5945  
       2021-08-12 11:30:54 +08:00
    没见过这种写法,建议打死
    robinlovemaggie
        9
    robinlovemaggie  
       2021-08-12 12:24:12 +08:00
    等你见到&&&&&甚至&&&&&&的写法时,就会见怪不怪了
    momocraft
        10
    momocraft  
       2021-08-12 12:40:09 +08:00
    数字会膨胀 就像 z-index: 10000000000000000;
    dcatfly
        11
    dcatfly  
       2021-08-12 12:43:23 +08:00   ❤️ 1
    https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

    建议先看看项目中基础库的用法,不过&在 sass 中也挺常见的
    ChefIsAwesome
        12
    ChefIsAwesome  
       2021-08-12 12:56:08 +08:00
    css 选择器超过两级就是失败。写出好几层选择器来搞所谓的覆盖就是失败中的失败。
    Xusually
        13
    Xusually  
       2021-08-12 13:09:35 +08:00   ❤️ 2
    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
        14
    admol  
       2021-08-12 13:12:48 +08:00   ❤️ 1
    后端看了瑟瑟发抖
    devwolf
        15
    devwolf  
    OP
       2021-08-12 13:29:19 +08:00
    @Xusually 感谢#13,这个 FAQs 描述的确实详细🤞
    cheese
        16
    cheese  
       2021-08-12 13:43:07 +08:00
    楼上都说了,主要是为了提权,但是四个&我也确实没见过
    murmur
        17
    murmur  
       2021-08-12 14:14:16 +08:00
    @Xusually 这样的意义在哪里,单纯的提权不是有 important 给你用么,还是规划烂到谁长谁说了算
    CokeMine
        18
    CokeMine  
       2021-08-12 19:06:44 +08:00 via Android
    这写法感觉还不如 important
    gdrk
        19
    gdrk  
       2023-02-24 09:22:52 +08:00
    无限覆盖,这样写也太蛋疼了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1536 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:10 · PVG 01:10 · LAX 10:10 · JFK 13:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.