CSS selectors can include, tag Selector, category selector, ID selector, intersection selector, and set selector, descendant selector, global selector, pseudo class, etc., these style applications have been supported in Flex
1. Tag Selector
The tag Selector is set based on the type of component in the Mxml file, as shown in the following example:
Copy Code code 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 above will change.
2. Category Selector
The category selector begins with a point, followed by a category selector represented by the name of the style set by StyleName in the component, as shown in the following example:
Copy Code code 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 is a category selector that begins with a # followed by the ID name set in the component, as shown in the following example:
Copy Code code 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 directly connected, and the result is to select the intersection of their respective element ranges, as shown in the following example:
Copy Code code 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. and set Selector
The set selector is a comma-connected selector, and the set selector selects the range of the base selector, and any form of selector is available, as the following example:
Copy Code code 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 the derivation selector, which can be used to define a style for the child elements in an element using the descendant selector, as shown in the following example:
Copy Code code 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
Global Selector Global can apply styles to all components, as shown in the following example:
Copy Code code 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 a different state, as shown in the following example:
Copy Code code 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"/>
