解说:
s|HGroup s|TextInput 为HGroup中定义的TextInput设置CSS样式。
这是一种依据元素在其位置的上下文关系来定义样式的方式。
这种形式的定义称为:派生
test1.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<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:VGroup>
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 1"/>
<s:TextInput text="sample"/>
</s:HGroup>
<s:TextInput text="sample"/>
</s:VGroup>
</s:Application>
执行结果:
编译器自动生成的代码:
var conditions:Array;
var condition:CSSCondition;
var selector:CSSSelector;
selector = null;
conditions = null;
conditions = null;
selector = new CSSSelector("spark.components.HGroup", conditions, selector);
conditions = null;
selector = new CSSSelector("spark.components.TextInput", conditions, selector);
// spark.components.HGroup spark.components.TextInput
style = styleManager.getStyleDeclaration("spark.components.HGroup spark.components.TextInput");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.color = 0xff0000;
};
}
可见,
对于派生,编译器将其视为一个整体进行AS转换。