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> 

    欢迎大家拍砖!

  • 相关阅读:
    第十三周助教作业
    【西北师大-19软工】第五次作业成绩汇总
    第十二周助教工作总结
    第十一周助教工作总结
    第九周助教工作总结
    第八周助教工作总结
    第七周助教工作总结
    SQLAlchemy 学习笔记(二):ORM 基础
    WebSocket 与 HTTP/2
    Chrome 与 Firefox-Dev 的 DevTools
  • 原文地址:https://www.cnblogs.com/yupeng/p/2014867.html
Copyright © 2011-2022 走看看