zoukankan      html  css  js  c++  java
  • CSS属性选择符

    在CSS的选择符中,除了常用的“类型选择符(E)、通配选择符(*)、包含选择符(E1 E2)、ID选择符(#ID)、选择符分组(E1,E2,E3)、类选择符(E.class)、伪类及伪对象选择符(E:P)”外还有“属性选择符(E[attr])”和“相邻选择符(E1+E2)”,试了一下属性选择符,感觉很不错,如果使用到页面中的话,会让CSS的定义更加的强大,可惜现在IE并不支持这一选择符。

    属性选择符可分为下面几种:

    Attribute Selectors
    E[attr] 属性选择符。
    选择具有attr属性的E。

    Attribute Selectors
    E[attr=value] 属性选择符。
    选择具有attr属性且属性值等于value的E。

    Attribute Selectors
    E[attr~=value] 属性选择符。
    选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E。

    Attribute Selectors
    E[attr|=value] 属性选择符。
    选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E。

    下面看看例子:

    --------------------HTML code----------------------
    <div class="demo">E[attr=value] 属性选择符</div>
    <div title="Attribute Selectors">E[attr] 属性选择符</div>
    <h1 class="dem demo">E[attr~=value] 属性选择符</h1>
    <h2 class="demo-demo2">E[attr|=value] 属性选择符</h2>
    ------------------------------------------------------------

    --------------------CSS code-----------------------
    body{line-height:1.3em;color:#000000;}
    .demo-demo2{background-color:#FFA500;}
    div[title]{color:#FFFFFF;background-color:#0000FF;}
    div[class=demo]{color:#FF0000;}
    h1[class~=demo]{color:#0000FF;}
    h2[class|=demo]{color:#008000;}
    -----------------------------------------------------------

  • 相关阅读:
    PHP+MYSQL单例模式的滑铁卢
    碰到一个安装SQl2008 Express Edition出错的怪异情况
    用虚拟并口解决向USB条码打印机发送ZPL指令的解决方案
    让excanvas支持动态创建的canvas标签(附演示文件)
    sql 检索语句
    c++ string 类基本用法样例
    Sqlite c/c++ api 学习
    最常见的20种VC++编译错误信息
    C#动态调用C++编写的DLL函数
    C++中将BYTE转16进制字符串
  • 原文地址:https://www.cnblogs.com/netlyf/p/1506429.html
Copyright © 2011-2022 走看看