• 请不要在回答技术问题时复制粘贴 AI 生成的内容
imherer
V2EX  ›  程序员

请教各位前端大佬一个 UnoCSS 问题

  •  
  •   imherer · Mar 22, 2024 · 3338 views
    This topic created in 956 days ago, the information mentioned may be changed or developed.

    假如我一个页面上有很多个 span ,比如说 5 个或者说更多

    我想给每个 span 加上 cursor-pointer 这个效果

    unocss 有没有像 css 那样直接写一次就搞定了,比如

    span {
      cursor: pointer;
    }
    

    但是如果用 unocss 的话我得在每个 span 里写 class="cursor-pointer"

    可能我举的这个例子不太合适哈,但是想表达的就是这样的意思

    16 replies  •  2024-03-25 08:54:34 +08:00
    musi
    musi
    Mar 22, 2024
    1
    你是否在找 @apply?
    span {
    @apply cursor-pointer;
    }
    hellodigua
    hellodigua
    Mar 22, 2024
    2
    这种需求不应该用 css 选择器吗,为什么要一律用原子类
    waiaan
    waiaan
    Mar 22, 2024
    3
    搭车问 unocss 和 elementui 的 button 样式冲突该怎么解决? tailwindcss 有解决办法,没找到 unocss 的。
    ntnyq
    ntnyq
    Mar 22, 2024
    4
    span 写成组件
    imherer
    imherer
    OP
    Mar 22, 2024
    5
    @musi 好像不起作用
    imherer
    imherer
    OP
    Mar 22, 2024
    6
    @hellodigua 好像是哈
    imherer
    imherer
    OP
    Mar 22, 2024
    7
    @musi 可以了,是没引用 transformer-directives
    zhwithsweet
    zhwithsweet
    Mar 22, 2024
    9
    在父元素设置
    <div class="[&_span]: cursor-pointer">
    <span />
    ...
    </div>
    v2yllhwa
    v2yllhwa
    Mar 22, 2024 via Android
    10
    @waiaan 用 preset 里的 style reset 了?
    Xu3Xan89YsA7oP64
    Xu3Xan89YsA7oP64
    Mar 23, 2024
    11
    你是觉得用了 UnoCSS 就不能用 CSS 了?再不济 map 或者封装一下也能解决,其他乱七八糟的方案就别研究了,都是狗屎
    crocoBaby
    crocoBaby
    Mar 23, 2024
    12
    全局样式重置咯
    subframe75361
    subframe75361
    Mar 23, 2024 via Android
    13
    children-cursor-pointer
    subframe75361
    subframe75361
    Mar 23, 2024 via Android
    14
    unocss 默认你会使用 tailwind ,原理可以看 https://tailwindcss.com/docs/hover-focus-and-other-states
    DrinkCoffee
    DrinkCoffee
    Mar 23, 2024 via Android
    15
    有多种方法,
    1.就是很笨的用 Vscode 的多光标让每个 span 都有这个 class (似乎 tw 文档也很推荐此方法?)
    2.用自定义工具类,就是楼上的[&_span]:
    其中&表示自己,_表示空格,换成>也行。
    3.然后还可以用*: 类表示所有后代。
    4.还可以封装组件(复杂情况下)。
    5.就是楼上说的 apply 。
    6.用自定义变体功能。
    7.用前端框架自带的遍历功能。
    另外还是要注意样式之间互相影响的问题。
    waiaan
    waiaan
    Mar 25, 2024
    16
    @v2yllhwa
    就是按照官网的 vue-cli5 配置的
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5015 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 09:08 · PVG 17:08 · LAX 01:08 · JFK 04:08
    ♥ Do have faith in what you're doing.