UnoCSS中伪元素与自定义内容属性的嵌套问题解析

在UnoCSS使用过程中，开发者发现了一个关于伪元素与自定义内容属性结合使用时的问题。当尝试为嵌套结构中的元素添加分隔符时，使用类似[&>div+div]:before:content-['•']的语法无法正常工作，而其他类似结构却可以正常使用。

问题现象

开发者希望实现一个点分隔符效果(如"第一•第二•第三")，通过UnoCSS为相邻的div元素添加伪元素和自定义内容。理论上，[&>div+div]:before:content-['•']这样的语法应该能够实现这一效果，但实际上却无法正常工作。

技术分析

经过深入分析，这个问题涉及到UnoCSS中变体(variants)的处理顺序和特殊字符的解析：

1. 变体处理机制：在UnoCSS中，before:和[&>div+div]都是变体，它们需要按照特定顺序处理才能正确生成CSS规则。

2. 特殊字符解析：问题核心在于UnoCSS对包含方括号的自定义内容值的解析方式。当变体顺序为[&>div+div]:before:content-['•']时，解析器会将before:content-[作为匹配目标，而不是预期的完整内容属性。

3. 变体顺序影响：当调整变体顺序为before:[&>div+div]:content-['•']时，虽然可以工作，但这是通过变体处理顺序的巧合实现的，并非理想解决方案。

解决方案

目前推荐的解决方案是调整变体顺序，将伪元素变体放在最前面：

<div class="before:[&>div+div]:content-['•']">
  <!-- 子元素结构 -->
</div>

这种写法能够确保：

1. 伪元素变体before:首先被处理
2. 选择器变体[&>div+div]随后应用
3. 最后处理内容属性content-['•']

底层原理

这个问题揭示了UnoCSS解析器在处理嵌套变体和特殊字符时的一些限制：

1. 变体优先级：伪元素变体需要优先处理，因为它们修改的是基础选择器
2. 字符转义：方括号在CSS选择器和属性值中都有特殊含义，需要特殊处理
3. 解析顺序：解析器从左到右处理变体，遇到特殊字符时可能提前终止匹配

最佳实践建议

1. 当使用伪元素与自定义内容结合时，将伪元素变体放在最前面
2. 对于复杂的嵌套选择器，考虑使用更明确的变体顺序
3. 在属性值包含特殊字符时，测试不同变体顺序以确保正确解析

这个问题虽然表现为一个特定场景的bug，但它反映了CSS预处理工具中变体处理和特殊字符解析的通用挑战。理解这些底层机制有助于开发者更有效地使用UnoCSS并解决类似问题。