Flex 4 descendant pseudo selectors with CSS

Flex 4 offers descendant css selectors and pseudo-selectors like:

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

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

However, if I combine these two an wanted to do something like this, it doesn't seem to work:

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

Is this possible with descendant pseudo-selectors?

(Of course I could use a styleName.open property on labelDisplay, but I think using pseudo-selectors is a more elegant 开发者_如何转开发solution)

This looks like it might be a Flex bug.

When the :open pseudo-selector is not already used, the descendant style doesn't get applied, as you discovered:

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

But, if you use the pseudo-selector; even empty, with no style information; it seems to fix it:

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

I can see the same behaviour in sdk's 4.0, 4.1 and 4.5. Not so pretty but at least there is a workaround.

Have you tried

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

}