Summary of CSS selector application in flex4.5

CSS selectors can include the tag selector, category selector, ID selector, intersection selector, Union selector, descendant selector, global selector, and pseudo class. These style applications have been supported in flex.

1. Tag Selector
The tag selector is set based on the component type in the MXML file, for example:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
S | TextInput {
Color: # FF0000;
}
S | Button {
Color: # FFFF00;
}
</Fx: Style>
<S: TextInput text = "text input"/>
<S: Button label = "button"/>

The color of the two controls changes accordingly.
2. Category Selector
The category selector starts with a vertex and is followed by the class selector represented by the style name set by styleName in the component. The example is as follows:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
. Btn2 {
Color: # FF0000;
}
</Fx: Style>
<S: Button label = "button2" styleName = "btn2"/>

3. ID Selector
The ID selector starts with # and is followed by the class selector represented by the ID name set in the component. The example is as follows:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
# Btn1 {
Color: # FF0000;
}
. Btn2 {
Color: # FF00FF;
}
</Fx: Style>
<S: Button id = "btn1" label = "button1"/>
<S: Button label = "button2" styleName = "btn2"/>

4. Intersection Selector
The intersection selector is composed of two selectors connected directly. The result is the intersection of the two element ranges. The example is as follows:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
S | Button # btn1 {
Color: # FF0000;
}
S | Button. btn2 {
Color: # FF00FF;
}
</Fx: Style>
<S: Button id = "btn1" label = "button1"/>
<S: Button label = "button2" styleName = "btn2"/>
<S: Button label = "button3"/>

5. Union Selector
The Union selector is composed of multiple selectors connected by commas. The Union selector selects the range selected by each basic selector at the same time. Any form of selector is acceptable. The example is as follows:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
S | Button # btn1, s | Button. btn2 {
Color: # FF0000;
}
</Fx: Style>
<S: Button id = "btn1" label = "button1"/>
<S: Button label = "button2" styleName = "btn2"/>
<S: Button label = "button3"/>

6. Descendant Selector
The descendant selector is also called a derived selector. You can use the descendant selector to define a style for the child element in an element. For example:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
S | HGroup s | TextInput {
Color: # FF0000;
}
</Fx: Style>
<S: HGroup verticalAlign = "middle">
<S: Label text = "Text Input 1"/>
<S: TextInput text = "sample"/>
</S: HGroup>
<S: TextInput text = "sample"/>

7. Global Selector
The global selector can apply styles to all components, for example:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
Global {
Color: # FF0000;
}
</Fx: Style>
<S: Label text = "label"/>
<S: TextInput text = "text input"/>
<S: Button label = "button"/>

8. pseudo class
A pseudo-class is used to set the style of a component in different States. An example is as follows:Copy codeThe Code is as follows: <fx: Style>
@ Namespace s "library: // ns.adobe.com/flex/spark ";
@ Namespace mx "library: // ns.adobe.com/flex/mx ";
S | Button: up {
Color: # FF0000;
}
S | Button: down {
Color: # FF00FF;
}
S | Button: over {
Color: # 0000FF;
}
</Fx: Style>
<S: Button label = "button"/>