调研CSS选择器在浏览器中的支持情况
转：yupeng
调研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:0 }
- 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>
复制代码欢迎大家拍砖！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论