Tailwind UI 示例中嵌套括号和 & 符号的使用

Question

有人可以帮忙翻译 Tailwind.css 中括号的用法吗？

例1中：[&_*]是什么意思？
例 2 中：嵌套括号与 _& 组合意味着什么？

示例1：

    document.documentElement.classList.add('[&_*]:!transition-none')

示例2：

<LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />

我能得到的最接近的是[].css 的引用属性选择（一般而言），并且“普通”SASS 嵌套规则中的 PostCSS 处理使用 & 符号（由 postcss- nested提供的 tailwind 默认嵌套声明支持定义）。

Answer 1

您所看到的是Tailwind 的任意变体功能的使用。

\n

方括号内是一个 CSS 选择器（或媒体查询，我不会在这里讨论它），带有＆号（& ) 代替该类所应用到的元素。嵌套括号是属性选择器，就像标准 CSS 选择器一样，正如您在 Stacked Overflow 问题中正确推断的那样。CSS 选择器中使用下划线代替空格。

\n

举几个例子：

\n

<div class="foo">\n  <div class="[.foo_&]:text-white"></div>\n</div>\n

\n

从概念上讲是这样的：

\n

<div class="foo">\n  <div class="bar"></div>\n</div>\n<style>\n/**\n * .foo .bar\n *   \xe2\x86\x93\n * .foo &\n *   \xe2\x86\x93\n * .foo_&\n */\n.foo .bar {\n  color: white;\n}\n</style>\n

\n

从.bar现在&开始.bar是我们要应用类/样式的元素

\n\n

另一个例子：

\n

<div class="foo"></div><div class="[.foo+&]:text-white"></div>\n

\n

从概念上讲是这样的：

\n

<div class="foo"></div><div class="bar"></div>\n<style>\n/**\n * .foo + .bar\n *   \xe2\x86\x93\n * .foo + &\n *   \xe2\x86\x93\n * .foo+&\n */\n.foo + .bar {\n  color: white;\n}\n</style>\n

\n

这+并不严格需要周围有空格，因此我们可以删除它们以获得更简洁的任意变体语法。

\n\n

<div data-foo class="[&[data-foo]]:text-white"></div>\n

\n

从概念上讲是这样的：

\n

<div data-foo class="bar"></div>\n<style>\n/**\n * .bar[data-foo]\n *   \xe2\x86\x93\n *    &[data-foo]\n */\n.bar[data-foo] {\n  color: white;\n}\n</style>\n

\n

希望这个例子能让嵌套的括号变得清晰。

\n