`
darrenzhu
  • 浏览: 804309 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

flex style的继承顺序

阅读更多
If you define a style in only one place in a document, Flex uses that definition to set a property’s value. However, an application can have several style sheets, local style definitions, external style properties, and style properties set directly on component instances. In such a situation, Flex determines the value of a property by looking for its definition in all these places in a specific order.

Lower-level styles take precedence over higher-level or external styles. If you set a style on an instance, and then set the style globally, the global style does not override the local style, even if you set it after you set the local style.

Style inheritance order
The order in which Flex looks for styles is important to understand so that you know which style properties apply to which controls.

Flex looks for a style property that was set inline on the component instance. If no style was set on the instance using an inline style, Flex checks if a style was set using an instance’s setStyle() method. If it did not directly set the style on the instance, Flex examines the styleName property of the instance to see if a style declaration is assigned to it.

If you did not assign the styleName property to a style declaration, Flex looks for the property on type selector style declarations. If there are no type selector declarations, Flex checks the global selector. If all of these checks fail, the property is undefined, and Flex applies the default style.

In the early stages of checking for a style, Flex also examines the control’s parent container for style settings. If the style property is not defined and the property is inheritable, Flex looks for the property on the instance’s parent container. If the property isn’t defined on the parent container, Flex checks the parent’s parent, and so on. If the property is not inheritable, Flex ignores parent container style settings.

The order of precedence for style properties, from first to last, is as follows:

  • Inline
  • Class selector
  • Type selectors (most immediate class takes precedence when multiple selectors apply the same style property)
  • Ancestor class’s type selector
  • Parent chain (inheriting styles only)
  • Theme defaults.css file
  • global selector

If you later call the setStyle() method on a component instance, that method takes precedence over all style settings, including inline.

Style definitions in <fx:Style> tags, external style sheets, and the defaults.css style sheet follow an order of precedence. The same style definition in defaults.css is overridden by an external style sheet that is specified by an <fx:Style source="stylesheet"/> tag, which is overridden by a style definition within an <fx:Style> tag.

注意点,如果你用styleManager.loadStyleDeclarations("assets/dynamicStyle.swf",true)的方式动态加载样式,那么动态加载的样式在生命周期内将会覆盖上述定义的样式,当然如果某些样式并没有出现在动态加载的样式里面,当然是不会被覆盖的,可以多次动态加载样式。
分享到:
评论

相关推荐

    flex学习资料flex学习资料

    - `auto`:如果没有设置该属性,则继承父元素的`align-items`属性。 - 其他值:`flex-start`, `flex-end`, `center`, `baseline`, `stretch`。 #### 四、Flex项目属性 除了容器属性外,还可以通过设置项目自身的...

    flex第一步(第6章)

    &lt;mx:Style source="style.css" /&gt; 移动图片" click="myMove.play()"/&gt; ``` 在这个例子中,`&lt;mx:Move&gt;`定义了一个Move动画,`target`属性指定了动画作用的对象,`xFrom`和`xTo`定义了动画中的起点和终点坐标...

    flexbox布局神器使用SASS语法编写

    本项目使用SASS(Syntactically Awesome Style Sheets)预处理器语言,进一步提高了CSS的可维护性和可扩展性。同时,借助gulp作为前端构建工具,可以自动化地完成样式编译、压缩等任务,提高开发效率。 1. **...

    前端 60 道面试题及答案.docx

    标准盒模型的宽度等于style里的width+margin+border+padding的总和,而怪异盒模型的宽度等于style里的width。 三、CSS选择器 CSS选择器包括: 1. 通配符:* 2. ID选择器:#ID 3. 类选择器:.class 4. 元素选择器...

    前端开源库-css-shorthand-properties

    1. **顺序规则**:当设置速记属性时,通常遵循特定的顺序,如`margin`是`top right bottom left`,`padding`和`border`相同,`font`是`font-size font-weight font-style font-variant font-family`。 2. **部分覆盖...

    css面试题.docx

    CSS(Cascading Style Sheets,层叠样式表)是一种用于描述网页样式的语言,广泛应用于Web开发领域。本文总结了常见的CSS面试题,涵盖了CSS基础知识、布局相关、样式控制、选择器、css引入方式、动画、性能优化等多...

    西北农林科技大学web期末复习的资料

    - **层叠性**:当两个或多个CSS规则应用于同一个元素并且它们具有相同的权重时,会根据CSS的层叠顺序来决定哪个规则生效。 - **继承性**:某些CSS属性可以被子元素继承。 #### 特殊性计算 - **HTML内样式**:具有...

    css样式表手册

    2. 盒模型布局(display: block/inline-block/flex/grid):现代CSS提供了更灵活的布局方式,如Flexbox(弹性盒子)和Grid(网格布局)。 六、响应式设计 使用媒体查询(@media)实现不同设备和屏幕尺寸下的样式...

    css布局实例.rar

    在网页设计领域,CSS(Cascading Style Sheets)布局是构建网页结构的关键技术。它允许开发者将样式与内容分离,使网页更具可读性、可维护性和灵活性。本压缩包"css布局实例.rar"提供了丰富的实例,对于初学者来说,...

    经典CSS+DIV布局模板

    6. **层叠和继承**:CSS的层叠特性使得样式可以按特定顺序应用,而继承则让子元素可以继承父元素的某些样式,简化了代码维护。 在"经典CSS+DIV布局模板"中,你可能会看到各种布局结构,如: - **一栏布局**:适用...

    CSS详解-DIV布局!!

    在网页设计领域,CSS(Cascading Style Sheets)和DIV元素是构建现代网页布局不可或缺的工具。本篇文章将深入探讨CSS的使用以及如何利用DIV进行布局。 首先,CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、...

    CSS详细讲解

    在网页设计领域,CSS(Cascading Style Sheets)是至关重要的技术,用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现。本教程将深入解析CSS的细节,帮助你理解如何有效地定义样式规则,从而创建美观且...

    css学习手册

    在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责定义网页元素的样式、布局和视觉呈现效果。通过学习CSS,你可以掌握如何创建美观、响应式的网页,并提高用户体验。以下是一份详细的CSS...

    div+css十天学会

    3. Flex布局:通过`display: flex`实现灵活的弹性布局,可调整元素大小和顺序。 4. Grid布局:使用`display: grid`创建二维网格布局,适用于复杂网页设计。 5. 响应式设计:利用媒体查询(@media rule)根据设备屏幕...

    css总结

    CSS,全称Cascading Style Sheets(层叠样式表),是网页设计中的核心技术之一,用于控制网页元素的样式、布局和呈现。它与HTML或XML等标记语言结合使用,为网页添加视觉效果和结构化表现。在本篇内容中,我们将深入...

    css+div导航yellow-vertical-css-menu

    9. CSS优先级和继承:CSS中的选择器优先级决定了样式应用的顺序。理解这一点对于调试和优化样式至关重要。同时,CSS的继承特性使得子元素可以继承父元素的某些样式。 10. 浏览器兼容性:编写CSS时,需要注意不同...

    css入门笔记

    继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !...

    css样式表中文手册

    - **层叠**:当多个样式应用到同一个元素时,CSS根据特定的层叠级别(如源顺序、特异性、重要性等)决定最终样式。 - **继承**:某些属性可以被子元素继承,如字体、颜色,但不是所有属性都能继承,如`margin`、`...

    网页开发技术必备CSS教程

    3. Flex布局:弹性盒子模型,适用于一维布局,可自动调整元素大小和顺序,实现响应式设计。 4. Grid布局:网格布局,适用于二维布局,可精确控制元素在网格中的位置和大小,是现代网页布局的新标准。 四、响应式...

Global site tag (gtag.js) - Google Analytics