Flex 样式选择器类型详解。

 

CSS Advanced Selectors - Functional and Design Specification

• Selector : In general, a CSS selector is a pattern to match elements in a document. The associated style declaration is applied to any element that matches the selector pattern.
  
  Note: When discussing CSS in the context of Flex, instead of a document "element" we will use the term "component". It is assumed these components implement the necessary interfaces to participate in the Flex style subsystem.

• Universal Selector : CSS has a special case of "*" as the subject is called the "universal selector" which matches any type. The "*" character can be omitted if other conditions exist on the subject.

Note: Flex has an alternate special root selector called "global" which functions as the root of the inheriting style protochain. Additional conditions are not meaningful on the "global" selector.

• Type Selector : A CSS type selector matches instances of a component by local name. For example, the following simple type selector Button matches the component with local name Button (i.e. in Flex the Button component is implemented with the ActionScript class mx.controls.Button).

  Button { color: #CC0000; }

• Class Selector : A CSS class selector matches components that meet a class condition. The CSS syntax to declare a class selector is to prefix the condition with a dot. You can either declare a class selector as a condition of a type selector, or universally to any type that meets the class condition.

  .header { background-color: #CCCCCC; }
  
  
  
  HBox.footer { background-color: #999999; }

  Note: In Flex a class condition is met using the styleName attribute on a component. For example, you may have two classes of HBox: "header" and "footer". Above, the first selector applies to any component with styleName="header"; the second selector should only apply to HBox components with styleName="footer" (something that actually needs to be fixed and enforced in Gumbo, as to-date class selectors have only been universal and any type in the selector is ignored).

• id Selector : A CSS id selector matches components that meet an id condition. The CSS syntax to declare an id condition is to prefix the id with a hash sign.

  #button13 { background-color: #CCCCCC; }
  
  
  
  Button#button13 { background-color: #999999; }

  Note: In Flex an id condition is met by setting the id attribute on a particular component.

• Descendant Selector: A CSS descendant selector matches components depending on their relationship to ancestor components in the document. A descendant selector allows you to match components based on whether they descend (i.e. are children, grandchildren, great grandchildren, etc...) from particular types of components.

  Panel Button { color: #CCCCCC; }
  
  
  
  VBox Panel Button { color: #999999; }

  Note: In Flex the ancestor/descendant relationship is determined based on the display list. Styles are only applied to components in the display list and thus when matching based on a relationship to an ancestor component, those ancestors must also be in the display list.

• Pseudo Selectors (for States): A CSS pseudo selector matches components based on an additional condition that may be dynamic and not necessarily defined by the document tree.

  Button:down { color: #CCCCCC; }
  
  
  
  Button:up { color: #999999; }

  In Gumbo we plan to make use of pseudo selectors to apply styles to components only when they are in a specified state. Flex's use of pseudo selectors are similar to CSS pseudo-element selectors in that they can only be applied to the subject of a selector, but since a components' state is transient they are also like pseudo-class selectors in that they may gain or lose a pseudo-class over time. As such, we simply refer to these selectors in Flex as pseudo-selectors.

• Subject (of a selector): The subject of a selector is the right most simple type selector in a potentially complex set of conditions. In the following examples, Button is the subject of each of these selectors:

  VBox Panel Button#button12 { color: #DDDDDD; }
  
  
  
  VBox.special Button { color: #CCCCCC; }
  
  
  
  Button:up { color: #EEEEEE; }
  
  
  
  Button.special { color: #FFFFFF; }