进入正文前,我们先温习下什么是“CSS选择器”?
CSS层叠样式表有很多种选择器,最基本的三种选择器:类选择器、类型选择器、ID选择器。
看几个例子:
(1-1)类选择器
下例是为所有按钮类型定义CSS样式,所有按钮的文字大小都被约束为12像素。
以某类型为对象来定义CSS样式,这个“Button” 就属于“类选择器”。
Button
{
font-size:12px;
}
(1-2)类别选择器
下例定义了一组CSS样式,并为它起名为“.MyButton”。它并不能约束所有按钮的文字大小。
它只能作用在显式地声明使用它的地方。例如在某个按钮的定义中加入:<s:Button styleName=".MyStyle"/>。
这个“.MyStyle” 就属于“类别选择器”。
.MyStyle
{
font-size:12px;
}
(1-3)ID选择器
下例定义了一组CSS样式,它作用在ID为“txtName”的组件上:<s:textInput id="txtName" width="100%" height="100%"/>
这个“#txtName” 就属于“ID选择器”。
#txtName
{
font-size:12px;
}
Flex支持CSS层叠样式表。
在开发环境中定义CSS就像上面三个例子,语法非常简单。
但本质上,定义的CSS内容将被编译器转换为AS代码。
我们来证明它。
使用FlashBuilder建立Flex工程:test1。并增加编译器参数 -keep-generated-actionscript=true,以此保留编译器自动生成的中间AS代码。
test1.mxml
这是一个非常简单的程序,没有显式地定义任何CSS样式。
因为Flex框架底层定义了很多默认的CSS样式,这些样式会被编译器便已成为AS代码,我们通过下面的例子来看看这些默认的CSS的内容。
styleManager是Flex框架中专门用于管理CSS样式的单例类,通过它我们可以看到其中全部的“CSS选择器”。
<?xml version="1.0" encoding="utf-8"?>
<!-- styles/SelectorsTest.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
public function showSelectors():void {
var selectors:Array = styleManager.selectors;
msg.text = "所有的选择器列表如下(" + selectors.length + ")\n";
for (var i:int = 0; i < selectors.length; i++) {
msg.text += "\n" + selectors[i];
}
}
]]>
</fx:Script>
<s:Button label="Show Selectors" click="showSelectors()"/>
<s:TextArea id="msg" width="100%" height="100%"/>
</s:Application>
程序运行结果显示一共有18个“CSS选择器”被使用了。是这样吗?如何证明曾经有这18个选择器被生成了?
我们看看编译器自动生成的AS代码中有无线索。
上图中左面generated文件夹的内容就是编译器自动生成的AS文件,其中_test1_Styles.as中定义了被使用的Flex框架默认CSS样式。其内容摘录如下:
分别定义了CursorManager的样式和ToolTip的样式。类似这样的定义共有18处,恰好和test1.mxml的运行结果一一完全对应。
//
// mx.managers.CursorManager
//
selector = null;
conditions = null;
conditions = null;
selector = new CSSSelector(mx.managers.CursorManager, conditions, selector);
mergedStyle = styleManager.getMergedStyleDeclaration("mx.managers.CursorManager");
style = new CSSStyleDeclaration(selector, styleManager, mergedStyle == null);
省略。。。
//
// mx.controls.ToolTip
//
selector = null;
conditions = null;
conditions = null;
selector = new CSSSelector(mx.controls.ToolTip, conditions, selector);
mergedStyle = styleManager.getMergedStyleDeclaration("mx.controls.ToolTip");
style = new CSSStyleDeclaration(selector, styleManager, mergedStyle == null);