Flex中的CSS： （6） CSS匹配分析

Flex的各种资料中对CSS没有深入地介绍。

Flex是开发Web应用展示层的利器。所谓“展示”就是可以看到的部分，作为控制外观（看到的部分）的CSS，其实大有学问。

CSS涉水太深，很难用通俗易懂的语言完整地说明CSS的方方面面。

当FlashPlayer显示列表中的某个显示元素寻找属于自己的样式的时候，它会按照如下顺序进行寻找：

1。自己的内联属性中是否直接设置了样式，如果是就采用之。

如： <s:Button x="55" y="191" label="Button" color="red"/>

2。如果没有设置内联属性，则看CSS中有没有匹配的ID选择器，如果有则采用之。

如： <s:Button x="55" y="191" label="Button" id="myButton"/>

CSS定义：

#myButton{
fontStyle:italic;
}

3。如果没有ID选择器，则看CSS中有没有匹配的类选择器，如果有则采用之。

如： <s:Button x="55" y="191" label="Button" styleName="myButton"/>

CSS定义：

.myButton{
fontStyle:italic;
}

4。如果没有类选择器，则看CSS中有没有匹配的类型选择器，如果有则采用之。

如： <s:Button x="55" y="191" label="Button" />

CSS定义：

Button{
fontStyle:italic;
}

5。如果没有类型选择器，则看需要匹配的该样式是否是可继承的，如果是，则查找其父类中是否有该样式的指定，如果有则采用之。如果没有，则继续在父类的父类中找寻，直到找到为止。如果最终没有找到，则采用全局样式（或默认样式）。

如： <s:Button x="55" y="191" label="Button" />

CSS定义：

*{
fontStyle:italic;
}

=================================================================

以上的内容为了叙述基本的思路，对CSS的复杂性作了相当的简化。

比如下面的多个CSS样式可能都作用于同一个显示元素上（ <s:Button id="myButton" styleName=".buttonStyle" label="Button" />）。

S|Group #myButton ------为某个Group中的ID为myButton的显示元素设置样式

S|VGroup S|Group #myButton ------为某个VGroup中的Group中的ID为myButton的显示元素设置样式

.buttonStyle ------为指定styleName=".buttonStyle"的显示元素设置样式

Button ------为全部按钮设置样式

* ------为所有显示元素设置样式

CSS提供了灵活的定义的同时，带来了解析的复杂性

CSS的优先级定义以及为了解决优先级的问题，提出的“特性值（specificity）”方法。。。。。

如果用浏览器解析CSS做类比，则说明Flex中的CSS原理，无异于说明浏览器内核解析CSS的原理（虽然Flex和浏览器不同。事实上说明Flex中的CSS要稍微容易一些）

限制CSS定义的时候形式上的多样性，会降低解析的复杂性，我认为常规的定义形式足以满足绝大多数的功能要求。