Flex 样式选择器类型详解。

 

CSS Advanced Selectors - Functional and Design Specification

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

• Universal Selector:CSS has a special case of "*" as the subject is called the "universalselector" which matches any type. The "*" character can be omitted ifother 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 CSStype selector matches instances of a component by local name. Forexample, the following simple type selector Button matches thecomponent with local name Button (i.e. in Flex the Button component isimplemented with the ActionScript class mx.controls.Button).

  Button { color: #CC0000; }

• Class Selector: A CSSclass selector matches components that meet a class condition. The CSSsyntax to declare a class selector is to prefix the condition with adot. You can either declare a class selector as a condition of a typeselector, 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 attributeon a component. For example, you may have two classes of HBox: "header"and "footer". Above, the first selector applies to any component withstyleName="header"; the second selector should only apply to HBoxcomponents with styleName="footer" (something that actually needs to befixed and enforced in Gumbo, as to-date class selectors have only beenuniversal and any type in the selector is ignored).

• id Selector: A CSS idselector matches components that meet an id condition. The CSS syntaxto 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: ACSS descendant selector matches components depending on theirrelationship to ancestor components in the document. A descendantselector allows you to match components based on whether they descend(i.e. are children, grandchildren, great grandchildren, etc...) fromparticular types of components.

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

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

• Pseudo Selectors (forStates): A CSS pseudo selector matches components based on anadditional condition that may be dynamic and not necessarily defined bythe document tree.

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

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

• Subject (of aselector): The subject of a selector is the right most simple typeselector in a potentially complex set of conditions. In the followingexamples, 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; }