在Flex开发中，样式控制是让界面“活”起来的关键一环。而CSS选择器，正是这其中的核心工具——它决定了样式规则究竟作用于哪些组件上。Flex对CSS选择器的支持相当全面，涵盖了从基础到进阶的多种类型，包括标签选择器、类别选择器、ID选择器、交集选择器、并集选择器、后代选择器、全局选择器以及伪类。这些样式应用，在Flex框架中都已得到良好支持。

先从最基础的开始看。

基础选择器：标签、类别与ID

标签选择器，顾名思义，就是根据组件在MXML文件中的类型来设置样式。比如，你想让页面上所有的TextInput都变成红色，或者让所有Button都变成黄色，直接指定组件类型即可。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|TextInput{
color: #FF0000;
}
s|Button{
color: #FFFF00;
}

上面这两个控件的颜色就会随之改变，简单直接。

类别选择器则更灵活一些。它以一个点开头，后面跟的是组件中通过styleName属性设置的样式名。这就好比给组件贴上了一个“标签”，你可以把同一类样式应用到不同的组件上，而不用管它们是什么类型。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.btn2{
color: #FF0000;
}

这里，所有设置了styleName="btn2"的按钮，都会应用这个红色样式。

ID选择器的针对性就更强了，它直接瞄准某个具体的组件。以#开头，后面跟着组件的ID名。如果你只想让某个特定的按钮与众不同，用ID选择器准没错。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#btn1{
color: #FF0000;
}
.btn2{
color: #FF00FF;
}

注意看，ID选择器的优先级往往比类别选择器更高，这一点在实际开发中需要留意。

进阶选择器：交集、并集与后代

当基础选择器不够用时，就需要组合拳上场了。

交集选择器由两个选择器直接连接而成，它只选中同时满足这两个条件的元素。比如说，你想选中某个特定ID的按钮，但又想限制它的类型，就可以这么写：

复制代码
代码如下:

@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;
}

在这个例子里，s|Button#btn1只影响那个ID为btn1的按钮，而s|Button.btn2则只影响类型为Button且样式名为btn2的按钮。

并集选择器则正好相反，它是“或者”的关系。多个选择器通过逗号连接，只要符合其中一个条件，样式就会生效。这非常适合用来批量处理多种不同元素的样式。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button#btn1,s|Button.btn2{
color: #FF0000;
}

这里，btn1和btn2都会变成红色，而btn3则不受影响。

后代选择器（也叫派生选择器）是处理层级关系的好帮手。它允许你给某个容器元素内部的子元素定义样式，而不会影响到容器外部的同类型元素。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|HGroup s|TextInput{
color: #FF0000;
}

在这个例子中，只有HGroup内部的TextInput会变成红色，而外部的那个TextInput则保持原样。这种精确控制，在复杂布局中非常实用。

全局与状态：全局选择器与伪类

全局选择器（global）是一个“大杀器”，它可以将样式应用到所有组件。如果你想让整个应用的所有文字都变成同一颜色，用global就对了。

复制代码
代码如下:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global{
color: #FF0000;
}

所有组件都会乖乖变成红色，但使用时要小心，因为全局样式的覆盖范围太广，容易造成意外影响。

最后是伪类，它用来设置组件在不同交互状态下的样式。比如按钮在按下、悬停或弹起时，可以呈现出不同的视觉效果。

复制代码
代码如下:

@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;
}

一个按钮，在弹起时显示红色，按下时变为紫色，鼠标悬停时又是蓝色。这种动态反馈，让交互体验更生动。

这八种选择器，基本覆盖了Flex开发中样式控制的大部分场景。从全局到局部，从静态到动态，选择器就像工具箱里的工具，用对了，写出的代码既清晰又高效。