• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    flex4.5中CSS选择器的应用小结
    CSS选择器可以包括,标签选择器、类别选择器、ID选择器、交集选择器、并集选择器、后代选择器、全局选择器、伪类等,这些样式应用都已经在flex得到支持

    1.标签选择器
    标签选择器是根据MXML文件中组件的类型来设置的,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    s|TextInput{
    color: #FF0000;
    }
    s|Button{
    color: #FFFF00;
    }
    /fx:Style>
    s:TextInput text="text input"/>
    s:Button label="button"/>

    上面二个控件的颜色会随之改变。
    2.类别选择器
    类别选择器是以一个点开头,后面加上组件中通过styleName设置的样式名来表示的类别选择器,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    .btn2{
    color: #FF0000;
    }
    /fx:Style>
    s:Button label="button2" styleName="btn2"/>

    3.ID选择器
    ID选择器是以#开头,后面加上组件中设置的ID名来表示的类别选择器,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    #btn1{
    color: #FF0000;
    }
    .btn2{
    color: #FF00FF;
    }
    /fx:Style>
    s:Button id="btn1" label="button1"/>
    s:Button label="button2" styleName="btn2"/>

    4.交集选择器
    交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,示例如下:
    复制代码 代码如下:

    fx:Style>
    @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;
    }
    /fx:Style>
    s:Button id="btn1" label="button1"/>
    s:Button label="button2" styleName="btn2"/>
    s:Button label="button3"/>

    5.并集选择器
    并集选择器是多个选择器通过逗号连接而成的,并集选择器同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    s|Button#btn1,s|Button.btn2{
    color: #FF0000;
    }
    /fx:Style>
    s:Button id="btn1" label="button1"/>
    s:Button label="button2" styleName="btn2"/>
    s:Button label="button3"/>

    6.后代选择器
    后代选择器也叫派生选择器,可以使用后代选择器给一个元素里的子元素定义样式,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    s|HGroup s|TextInput{
    color: #FF0000;
    }
    /fx:Style>
    s:HGroup verticalAlign="middle">
    s:Label text="Text Input 1"/>
    s:TextInput text="sample"/>
    /s:HGroup>
    s:TextInput text="sample"/>

    7.全局选择器
    全局选择器global可以将样式应用到所有的组件,示例如下:
    复制代码 代码如下:

    fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    global{
    color: #FF0000;
    }
    /fx:Style>
    s:Label text="label"/>
    s:TextInput text="text input"/>
    s:Button label="button"/>

    8.伪类
    伪类是用来设置组件在不同状态下的样式,示例如下:
    复制代码 代码如下:

    fx:Style>
    @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;
    }
    /fx:Style>
    s:Button label="button"/>
    上一篇:flex中event.preventDefault()方法取消事件的默认行为
    下一篇:Flex Label控件竖排显示文字的实现代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    flex4.5中CSS选择器的应用小结 flex4.5,中,CSS,选择器,的,