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

[imherer]

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

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

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

span {
  cursor: pointer;
}

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

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

[musi]

你是否在找 @apply?
span {
@apply cursor-pointer;
}

[hellodigua]

这种需求不应该用 css 选择器吗，为什么要一律用原子类

[waiaan]

搭车问 unocss 和 elementui 的 button 样式冲突该怎么解决？ tailwindcss 有解决办法，没找到 unocss 的。

[ntnyq]

span 写成组件

[imherer]

@musi 好像不起作用

[imherer]

@hellodigua 好像是哈

[imherer]

@musi 可以了，是没引用 transformer-directives

[u3u]

样式组件解忧愁
https://react-twc.vercel.app
https://tw-classed.vercel.app

[zhwithsweet]

在父元素设置
<div class="[&_span]: cursor-pointer">
<span />
...
</div>

[v2yllhwa]

@waiaan 用 preset 里的 style reset 了？

[Xu3Xan89YsA7oP64]

你是觉得用了 UnoCSS 就不能用 CSS 了？再不济 map 或者封装一下也能解决，其他乱七八糟的方案就别研究了，都是狗屎

[crocoBaby]

全局样式重置咯

[subframe75361]

children-cursor-pointer

[subframe75361]

unocss 默认你会使用 tailwind ，原理可以看 https://tailwindcss.com/docs/hover-focus-and-other-states

[DrinkCoffee]

有多种方法，
1.就是很笨的用 Vscode 的多光标让每个 span 都有这个 class （似乎 tw 文档也很推荐此方法？）
2.用自定义工具类，就是楼上的[&_span]:
其中&表示自己，_表示空格，换成>也行。
3.然后还可以用*: 类表示所有后代。
4.还可以封装组件（复杂情况下）。
5.就是楼上说的 apply 。
6.用自定义变体功能。
7.用前端框架自带的遍历功能。
另外还是要注意样式之间互相影响的问题。

[waiaan]

@v2yllhwa
就是按照官网的 vue-cli5 配置的