zoukankan      html  css  js  c++  java
  • 调研CSS选择器在浏览器中的支持情况

    网上有很多这样的信息,很多的图表对各个浏览器进行比较,关于特性的支持,其实有些不全面,本文就日常常见的一些css选择器进行一个总结(本文在标准模式下)。

    1)关于:active,:link,:hover,:visited伪类

    在css1的规范中,这四个伪类仅作用在a 标签上。在后来的所有浏览器中都是支持a标签的这个属性。所以为了鼠标特效能够支持各种浏览器,a标签是一个首选的标签,利用display:block或者display:inline-block可以使a

    标签具有很多的特性。我经常用它来做按钮,来实现3态,效果很好,不过在表单中就不推荐来做按钮了。

    :link 和:visited 从表面上来看,就是连接,看来只有在a标签上使用了。没有什么变化。

    :hover 就是鼠标滑到上的状态,在ie7+,firefox,chrome的标准模式上就开始支持所有标签了。 

    : active 就是一个元素被激活时的状态,在ie8+,firefox,chrome也尅是支持所有的标签了。 

    后面我将附上我研究这些特性的代码。

    2)关于 :before,:after :first-child ,:focus伪类

    为什么要把这几个另外分开呢?原因就是他们也a标签没什么大的联系,用的也不多。

    :before&&:after 就是在一个元素的内容之前或者之后插入生成的内容,我之前的一边文章中介绍过。它和content属性配合使用。一个很经典的使用就是清除浮动。

    :first-child 选择子节点的第一个子节点元素,这个是css2中的产物,ie7的标准模式下就开始支持了。但是这个子节点和父节点之间不能有注释,有注释就 悲剧了。但是ie8是支持的,即使是有注释。ie8比ie7有很大的改进

    :focus 获取键盘焦点上的所有元素。这个也很强大。但是只是在ie8+的标准模式下支持。

    3)关于子选择器 ( > ) 

    在ie7+标准模式,chrome,ff下开始支持了。有人说在ie7下,如果父元素与子元素之间有注释的话就会失效,但是我没有发现。

    4) 临近兄弟选择器(+)

     在ie7+标准模式。chrome,ff下开始支持了。但是,如果父元素与子元素之间有注释的话就会失效。ie8没有。看来,ie8比ie7有很大的改进。

    5)普通兄弟选择器(~)

    选择该元素后面的所有兄弟节点,在ie7+标准模式,chrome,ff下支持。它和临近兄弟节点选择器的区别就是,前者就选择后面所有的,不要求相邻,但是后面必须是相邻,且选择一个。

    附上我研究的代码:

     1 <!DOCTYPE HTML>
     2 <html >
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
     5     <style type="text/css">
     6     * { margin:0; padding:}
     7 #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial; }
     8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
     9 div > p{
    10     color:blue;
    11 }
    12 li:hover{
    13     background:#dfdfdf;
    14     color:blue;
    15 }
    16 .test:active{
    17     background:#dfdfdf;
    18 }
    19 .tt +p{
    20         background:#dfdfdf;
    21 }
    22     </style>
    23     <title>ie7对css2的支持情况</title>
    24 </head>
    25 <body>
    26     <div id="doc">
    27     <h4>研究ie7对css2选择器的支持情况</h4>
    28     <div>
    29     <!--test-->
    30         <p>后代选择器的支持情况</p>
    31         <p>后代选择器的支持情况</p>
    32     </div>
    33     <ul>
    34         <li>伪类选择器的支持情况</li>
    35         <!--test-->
    36         <li>伪类选择器的支持情况</li>
    37         <li>伪类选择器的支持情况</li>
    38     </ul>
    39     <p>临近兄弟节点选择器</p>
    40     <div></div>
    41         <!--test-->
    42     <p>兄弟节点选择器</p>
    43     <p>兄弟节点选择器</p>
    44     <div class="test">active临近兄弟节点选择器</div>
    45     <div class="tt">heading</div>
    46     <div></div>
    47     <p>临近兄弟节点选择器1</p>
    48     <p>临近兄弟节点选择器2</p>
    49     </div>
    50 </body>

    51 </html> 

    欢迎大家拍砖!

  • 相关阅读:
    POJ3693 Maximum repetition substring —— 后缀数组 重复次数最多的连续重复子串
    SPOJ
    POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
    POJ3261 Milk Patterns —— 后缀数组 出现k次且可重叠的最长子串
    POJ1743 Musical Theme —— 后缀数组 重复出现且不重叠的最长子串
    SPOJ
    AC自动机小结
    HDU3247 Resource Archiver —— AC自动机 + BFS最短路 + 状压DP
    POJ1625 Censored! —— AC自动机 + DP + 大数
    Herding
  • 原文地址:https://www.cnblogs.com/yupeng/p/2014867.html
Copyright © 2011-2022 走看看