Tailwind CSS语法[&_.recharts-tooltip-cursor]:fill-zinc-200含义咨询

• 这是Tailwind CSS的**自定义变体（Custom Variants）**语法，属于Tailwind的高级功能，和JSX无关。
• 逐部分拆解代码含义：
  • []：Tailwind中用方括号包裹的是任意值/自定义变体，用来实现常规工具类不支持的复杂选择器逻辑。
  • &：代表当前组件（即<BarChart>元素本身）的CSS选择器，和原生CSS里的&作用完全一致。
  • _.recharts-tooltip-cursor：_是Tailwind里的空格替代符，这段表示当前组件下所有带有recharts-tooltip-cursor类名的子元素。
  • :fill-zinc-200：最终要应用的工具类，给匹配到的子元素设置填充色为zinc-200。

简单来说，这段代码的作用是：给<BarChart>组件内部所有带recharts-tooltip-cursor类的子元素，设置填充色为zinc-200。

• 相关Tailwind特性说明：
  • 这属于Tailwind的**任意变体（Arbitrary Variants）**功能，允许你通过自定义CSS选择器作为变体，精准限定工具类的作用范围。
  • 当需要针对组件内部特定子元素调整样式，又不想编写额外独立CSS时，就可以使用这种语法快速实现需求。

内容的提问来源于stack exchange，提问作者Chaong