这个计算出的 CSS 是什么意思？

Question

我有一个可以是“打开”或“关闭”的组件。根据此状态，相应的属性会添加到组件中（例如 data-state=open）。 当

data-state=open

:

时，该组件使用 Tailwind 应用一些内联 CSS 来旋转子 SVG 组件

<Component className="[&[data-state=open]>svg]:rotate-180">
    <svg />
</Component>

这是可行的，但是 Chrome 开发工具所看到的计算 CSS 非常奇怪：

这是怎么回事？这似乎相当于：

[data-state=open]>svg:rotate-180[data-state=open]>svg {
    ...
}

但这意味着什么呢？它是有效的 CSS 还是这是某些开发工具的显示技巧？

它是有效的CSS吗？而不是某些开发工具显示的技巧——这是Tailwind输出的预期规则。

Answer 1

任意变体

中使用与号字符

&

来表示“此”元素。

反斜杠转义字符，否则这些字符在 CSS 中具有特殊含义。 因此，构建规则选择器的步骤（可能与 Tailwind 中的顺序不同，但应该演示如何构建选择器：

原始类名：

.[&[data-state=open]>svg]:rotate-180 {

1. 转义特殊字符：

   .\[\&\[data-state\=open\]>svg\]\:rotate-180 {
   

2. 将

   &[data-state=open]>svg

   代入选择器，其中
&
3. 是其本身：

    ( ------------------ & ----------------- )[data-state=open]>svg
                         ↓
   .\[\&\[data-state\=open\]>svg\]\:rotate-180[data-state=open]>svg {