Flex 4后代伪选择器与CSS

Question

Flex 4提供了后代CSS选择器和伪选择器，例如：

s|DropDownList:open {
    font-size: 11;
}

s|DropDownList #labelDisplay {
    font-size: 12;
}

然而，如果我将这两个合并并想要做类似于这样的操作，它似乎不起作用：

s|DropDownList:open #labelDisplay {
    font-size: 13;
}

使用后代伪选择器是否可行？

（当然，我可以在labelDisplay上使用styleName.open属性，但我认为使用伪选择器是更优雅的解决方案）

- Treur

Answer 1

你试过了吗？

s|DropDownList:open, s|DropDownList #labelDisplay{
fontSize: 13;

}

- Peter Witham

---

这与 OP 尝试实现的不同。逗号符号表示： a，b { /* 样式 */ }是以下缩写形式的简写： a { /* 样式 */ } b { /* 样式 */ } - Peter Hall

Answer 2

这看起来可能是Flex的一个bug。

当:open伪选择器尚未使用时，后代样式不会被应用，正如您发现的那样：

    s|DropDownList #labelDisplay {
        font-size: 12;
    }
    s|DropDownList:open #labelDisplay {
        font-size: 14;
    }

但是，如果您使用伪选择器；即使为空，没有样式信息；它似乎也可以解决这个问题：

    s|DropDownList #labelDisplay {
        font-size: 12;
    }
    /* this line fixes it */
    s|DropDownList:open {}
    s|DropDownList:open #labelDisplay {
        font-size: 14;
    }

我在sdk的4.0、4.1和4.5中看到了相同的行为。虽然不太美观，但至少有一个解决方法。

- Peter Hall