unocss-variants-list

UnoCSS Variants

https://unocss.dev/config/variants 截至 v66.3.3, 官方文档没有一个完整的 variants list, 而是提供了链接 preset-mini/src/_variants 让用户去阅读代码…

文档列出项

• dark: / light:
• hover: / focus:

嵌套选择器 [&]:

嵌套选择器 [&_.some-descendant-selector]:some-utility

• 使用 _ 代替空格
• 举例说: 如果想定制 ant-design Checkbox 组件下面的某个 DOM 元素的样式

  <antd.Checkbox className='[&_.ant-checkbox-label]:inline-flex' />
  编译成

  /* layer: default */
  .\[\&_\.ant-checkbox-label\]\:inline-flex .ant-checkbox-label {
    display: inline-flex;
  }

否定 not-

ml-10px first:ml-0 => not-first:ml-10px

important:

[!NOTE]
Syntax !<utility> or important:<utility>

如 !flex or important:flex

layer-

[!NOTE]
Syntax layer-<layer-name>:<utility>

其他

[!CAUTION]

• 以下内容由 GPT-4o 整理
• 属性类在 presetWind3 config 下不生效

状态类

hover:	鼠标悬浮时生效	hover:bg-red-500
focus:	获取焦点时生效	focus:ring-2
active:	激活时生效	active:scale-95
visited:	已访问链接	visited:text-purple-500
disabled:	元素禁用	disabled:opacity-50
checked:	被选中状态	checked:bg-blue-500
first:	第一个子元素	first:mt-0
last:	最后一个子元素	last:mb-0
odd:	奇数索引元素（从1开始）	odd:bg-gray-100
even:	偶数索引元素	even:bg-gray-200
before:	::before 伪元素	before:content-[‘→’]
after:	::after 伪元素	after:content-[‘←’]

结构类

Variant	描述	示例
group-hover:	父 .group 悬浮时	group-hover:text-blue-500
group-focus:	父 .group 聚焦时	group-focus:ring-2
peer-hover:	.peer 悬浮时	peer-hover:opacity-50
peer-focus:	.peer 聚焦时	peer-focus:ring-2
parent-hover:	父元素悬浮时（CSS 选择器层级）	parent-hover:text-green-500
nth-child(n):	第 n 个子元素	nth-child(3):text-red-500
not-nth-child(n):	非第 n 个子元素	not-nth-child(3):text-gray-500

属性类

Variant	描述	示例
aria-*:	针对 aria-* 属性值	aria-checked:bg-green-500
data-*:	针对 data-* 属性值	data-open:rotate-180
attr-[name=value]:	自定义属性选择器	attr-[type=submit]:bg-blue-500

响应式 / 媒体查询

Variant	描述	示例
sm: / md: / lg:	默认断点	md:text-lg
min-[width]:	自定义最小宽度	min-[800px]:text-red-500
max-[width]:	自定义最大宽度	max-[600px]:text-blue-500
supports-[prop]:	特性检测（@supports）	supports-[backdrop-filter]:blur
print:	打印媒体查询	print:hidden
portrait: / landscape:	屏幕方向	landscape:bg-yellow-100

主题模式 / 方向性

Variant	描述	示例
dark:	暗色模式	dark:bg-black
light:	亮色模式	light:bg-white
ltr:	从左到右文本	ltr:text-left
rtl:	从右到左文本	rtl:text-right

修饰符与特殊变体

Variant	描述	示例
! 或 important:	添加 !important	!text-red-500
not-:	反向变体	not-hover:bg-gray-300
pseudo:（已合并）	伪类变体（多个合并）	first-child:text-blue-500