Flex中的CSS：（3）CSS会被编译器转换为什么样的AS代码--交集：s|Button#btn-优快云博客

本文介绍了一种使用MXML中的CSS选择器来指定样式的方法。通过实例展示了如何仅对特定ID的按钮应用样式，而不影响其他按钮。此外，还探讨了不同CSS选择器语法在编译器生成代码中的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解说：

s|Button#btn 这种形式的CSS将作用在id为btn的按钮上。其他的按钮不受影响

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{ 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()"/> </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; }; }

如果把CSS定义改为：s|Button#btn --> #btn，执行结果没有变化，但是自动生成的代码会有变化，看看是怎样的吧：

注意到变化了吗？

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("", conditions, selector); // #btn style = styleManager.getStyleDeclaration("#btn"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.fontSize = 20; }; }