Flex中的CSS：（3）CSS会被编译器转换为什么样的AS代码--组合：s|Button#btn, .MyStyle...

最新推荐文章于 2025-12-04 18:10:19 发布

最新推荐文章于 2025-12-04 18:10:19 发布 · 111 阅读

文章标签：

#大数据

本文探讨了如何在MXML中使用逗号分隔形式定义CSS样式，包括Button和.MyStyle类的选择器，并展示了如何在代码中应用这些样式。通过实例分析，说明了这种定义方式与单独定义CSS的效果相同。

解说：

s|Button#btn, .MyStyle 这种用逗号分隔形式的CSS定义体实际上是多个定义的组合。即

s|Button#btn

{。。。}

.MyStyle

{。。。}

test1.mxml

<?xml version="1.0" encoding="utf-8"?>  <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:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button#btn,.MyStyle{ font-size:20px; } </fx:Style> <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:Group id="group1" width="511" height="396"> <s:TextArea id="msg" x="1" y="28" width="100%" height="359"/> <s:Button id="btn" label="Show Selectors" click="showSelectors()"/> </s:Group> <s:Group id="group2" width="511"> <s:Button label="test" click="showSelectors()" styleName="MyStyle"/> </s:Group> </s:Application>

执行结果：

编译器自动生成代码：

var conditions:Array; var condition:CSSCondition; var selector:CSSSelector; selector = null; conditions = null; conditions = []; condition = new CSSCondition("id", "btn"); conditions.push(condition); selector = new CSSSelector("spark.components.Button", conditions, selector); // spark.components.Button#btn style = styleManager.getStyleDeclaration("spark.components.Button#btn"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.fontSize = 20; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("class", "MyStyle"); conditions.push(condition); selector = new CSSSelector("", conditions, selector); // .MyStyle style = styleManager.getStyleDeclaration(".MyStyle"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.fontSize = 20; }; }

可见，这种形式定义的CSS和分开定义的结果是完全相同的。