zoukankan      html  css  js  c++  java
  • CSS中的选择器(一)

     API文档:http://css.cuishifeng.cn/all.html

    1. 通配选择符(*)

    语法:

      * { sRules }

    说明:

      通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用

    兼容性:

      IE6及更早浏览器并不支持通配选择符(*),而是将它忽略了,所以也变相的能看到效果。

    2. 类型选择符(E)

    语法:

      E { sRules }

    3. ID选择符(E#id)

    语法:

      E#myid { sRules }

    4. 类选择符(E.class)

    语法:

      E.myclass { sRules }

    说明:

      不同于ID选择符的唯一性,类选择符可以同时定义多个。

      .a.b { color: #f00; }

    兼容性:

      IE6不支持多类选择符,形如:.a.b {}

    5. 包含选择符(E F)

    语法:

      E F { sRules }

    说明:

      选择所有被E元素包含的F元素。

    6. 子选择符(E>F)

    语法:

      E>F { sRules }

    说明:

      选择所有作为E元素的子元素F。

      与 包含选择符(E F) 不同的是,子选择符只能命中子元素,而不能命中孙辈。

    <div class="demo">
      <div class="a">
        <div class="b">子选择符</div>
      </div>
    </div>
    .demo > div { position: relative; }
    此例只有 .a 会被命中,因为它是 .demo 的子元素;

    兼容性:

      IE6不支持

    7. 相邻选择符(E+F)

    语法:

      E+F { sRules }

    说明:

      选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。

    兼容性:

      IE6不支持

    8. 兄弟选择符(E~F)

    语法:

      E~F { sRules }

    说明:

      选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。

      需要注意的是,选择的只是同级的元素F,后代中的元素F不会被选择。

    兼容性:

      IE6不支持

    9. E:link

    语法:

      E:link { sRules }

    说明:

      设置超链接a在未被访问前的样式。

      如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现。超链接的4种状态,需要有特定的书写顺序才能生效。

      a:link {} a:visited {} a:hover {} a:active {}

      注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后

      可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

    兼容性:

      IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active。

    10. E:focus

    语法:

      E:focus { sRules }

    说明:

      设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。

      webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

    兼容性:

      IE7及以下不兼容

    11. E:first-child

    语法:

      E:first-child { sRules }

    说明:

      匹配父元素的第一个子元素E。

      要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素

    12. E[att]

    语法:

      E[att] { sRules }

    说明:

      选择具有att属性的E元素。

    兼容性:

      IE6不兼容

    13. E[att="val"]

    语法:

      E[att="val"] { sRules }

    说明:

      择具有att属性且属性值等于val的E元素。

    兼容性:

      IE6不兼容

    14. E[att~="val"]

    语法:

      E[att~="val"] { sRules }

    说明:

      选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。

    兼容性:

      IE6不兼容

    15. E[att^="val"]

    语法:

      E[att^="val"] { sRules }

    说明:

      选择具有att属性且属性值为以val开头的字符串的E元素。

    兼容性:

      IE6不兼容

    16. E[att$="val"]

    语法:

      E[att$="val"] { sRules }

    说明:

      选择具有att属性且属性值为以val结尾的字符串的E元素。

    兼容性:

      IE6不兼容

    17. E[att*="val"]

    语法:

      E[att*="val"] { sRules }

    说明:

      选择具有att属性且属性值为包含val的字符串的E元素。

    兼容性:

      IE6不兼容

    18. E[att|="val"]

    语法:

      E[att|="val"] { sRules }

    说明:

      选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。

      这样理解会更简单:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。

    兼容性:

      IE6不兼容

  • 相关阅读:
    [转]红帽 Red Hat Linux相关产品iso镜像下载【百度云】
    JAVA中的类
    Java并发编程:Lock
    字符集和编码的区别
    MySQL索引背后的数据结构及算法原理
    B树、B-树、B+树、B*树 红黑树
    linux下nginx的安装
    对.net orm工具Dapper在多数据库方面的优化
    Dapper使用方法
    filebeat to elasticsearch配置
  • 原文地址:https://www.cnblogs.com/myitnews/p/11781062.html
Copyright © 2011-2022 走看看