children-[]

通过 children， 指定目标子元素下的样式

生成的 css 通过 > 分隔符关联

UnoCSS Playground

1. 所有子元素: children:bg-red children-[text-align:center]

2. 指定特定子元素: children-[div]:bg-red children-[.target]-[text-align:center]

<div class="space-y-2 children-[div]:bg-red children-[.target]:bg-blue children-[text-align:center]">
  <div>1</div>
  <div class="target">2</div>
  <div>
    <div class="target">3</div>
  </div>
  <span class="w-full block">4</span>
</div>

---

next-[]

通过 next, 指定目标相邻元素的样式

生成的 css 通过 + 分隔符关联

UnoCSS Playground

1. 相邻元素: next:bg-blue next-[text-align:center]
2. 特定相邻元素： next-[.target]:bg-blue next-[div]-[text-align:center]

<div class="space-y-2 ">
  <div>1</div>
  <div class="next:bg-blue next-[text-align:center]">2</div>
  <div>3</div>
  <div class="next-[.target]:bg-blue">4</div>
  <div>5</div>
  <div class="next-[.target]:bg-blue next-[div]-[text-align:center]">6</div>
  <div class="target">7</div>
</div>