文档章节

css 选择器浏览器的支持

奥巴码侬
 奥巴码侬
发布于 2014/12/12 10:57
字数 1103
阅读 47
收藏 0

CSS选择器的浏览器支持

下面是一系列关于最流行的浏览器对CSS选择器和伪选择器的支持情况的测试。该测试包括从过去美好的CSS1到当前时髦的CSS3最基本的东西。如果你想了解关于CSS的选择器的更多内容,W3C官方文档绝对是个好地方!

如果你发现了任何错误(这个,大家都会发生的)或者有任何看法,请在前端观察联系我们。

CSS 1
↓ 选择器 / 
浏览器 →
IE6 IE7 + FF 2 + Safari 3.0 + Chrome 2 + Opera
↑ 选择器 / 
浏览器 →
IE6 IE7 + FF 2 + Safari 3.0 + Chrome 2 + Opera
E YES YES YES YES YES YES
E F YES YES YES YES YES YES
:link YES YES YES YES YES YES
E:active YES YES YES YES YES YES
:visited YES YES YES YES YES YES
E:first-line NO YES YES YES YES YES
E:first-letter NO YES YES YES YES YES
E.classname YES YES YES YES YES YES
E#id YES YES YES YES YES YES
.classname.classname NO YES YES YES YES YES
CSS 2.1
↓ 选择器 / 
浏览器 →
IE6 IE7 IE8 + FF 2 + Safari 3.0 Safari 3.2+ Chrome 2 + Opera
↑ 选择器 / 
浏览器 →
IE6 IE7 IE8 + FF 2 + Safari 3.0 Safari 3.2+ Chrome 2 + Opera
* YES YES YES YES YES YES YES YES
E > F NO YES YES YES YES YES YES YES
E:first-child NO YES YES YES YES YES YES YES
E:hover PARTIAL (1) YES YES YES YES YES YES YES
E:focus NO NO YES YES YES YES YES YES
E + F NO YES YES YES YES YES YES YES
E[attr] NO YES YES YES YES YES YES YES
E[attr="name"] NO YES YES YES YES YES YES YES
E[attr~="name"] NO YES YES YES YES YES YES YES
E:before NO NO YES YES YES YES YES YES
E:after NO NO YES YES YES YES YES YES
CSS 3
↓ 选择器 / 
浏览器 →
IE6 IE7 IE8 IE9 + FF 3 FF 3.5 + Safari 3.0 Safari 3.2+ Chrome 2 Opera
↑ 选择器 / 
浏览器 →
IE6 IE7 IE8 IE9 + FF 3 FF 3.5 + Safari 3.0 Safari 3.2+ Chrome 2 Opera
E ~ F NO YES YES YES YES YES YES YES YES YES
E[attr^="name"] NO YES YES YES YES YES YES YES YES YES
E[attr$="name"] NO YES YES YES YES YES YES YES YES YES
E[attr*="name"] NO YES YES YES YES YES YES YES YES YES
E[attr|="name"] NO YES YES YES YES YES YES YES YES YES
E:root NO NO NO YES YES YES YES YES YES YES
E:nth-of-type NO NO NO YES NO YES NO YES YES YES
E:nth-last-of-type NO NO NO YES NO YES NO YES YES YES
E:first-of-type NO NO NO YES NO YES YES YES YES YES
E:last-of-type NO NO NO YES NO YES NO YES YES YES
E:only-of-type NO NO NO YES NO YES NO YES YES YES
E:only-child NO NO NO YES YES YES NO YES YES YES
E:last-child NO NO NO YES YES YES NO YES YES YES
E:nth-child NO NO NO YES NO YES NO YES YES YES
E:nth-last-child NO NO NO YES NO YES NO YES YES YES
E:empty NO NO NO YES YES YES YES YES (3) YES YES
E:target NO NO NO YES YES YES YES YES YES YES
E:checked NO NO NO YES YES YES YES YES YES YES
E:selection NO NO NO YES YES
只支持-MOZ-
YES
只支持-MOZ-
YES YES YES YES
E:enabled NO NO NO YES YES YES YES YES YES YES
E:disabled NO NO NO YES YES YES YES YES YES YES
E:not(s) NO NO NO YES YES YES YES YES YES YES
  1. :hover 在IE6中只有a元素可用。
  2. E:empty 貌似在webkit核心浏览器中有些小bug。
  3. 如果这个bug依然存在,不太确定如何测试。
  4. IE6不支持.class1{}.class2{}双类选择器。

IE8注意事项:

  • E[attr]选择器在值为空的时候或者写错的时候,将不会生效;
  • IE8支持CSS2.1的所有属性,支持伪类,但是不支持伪元素。

IE8中的IE7兼容模式

  • E[attr] 和IE8一样,值为空或写错的时候,无效;
  • E[attr~=val]这里唯一需要注意的是,属性的值,区分大小写;
  • E[attr|=val]IE7有一些大小写敏感的问题,但是通常可以正常使用;
  • :first-child IE7 会将一个注释或者文字节点当成first-child,而不是只有元素才是“子”元素。所以,如果在第一个子元素前有注释或文字,IE7会匹配之而不是去匹配第一个子元素。

Safari/Chrome

  • Safari3.2(事实上可以追溯到3.1)以上的版本已经完全的支持所有CSS选择器了。
  • Safari3.0基本上对CSS 2的选择器支持很好,但不支持CSS3大部分新增的选择器,而且对属性选择器的支持不是很完整
  • iPhone中的Safari有3.0和3.2两个版本,对CSS的支持情况与PC/Mac版的支持情况一致。
  • Android系统自带的浏览器基本上也是基于webkit核心的,其对于CSS选择器的支持情况待测。

本文转载自:http://labs.qianduan.net/css-selector/

奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
私信 提问
[译]19个CSS level 4 选择器

原文作者:Marouen Mhiri 原文链接:19 CSS-Level-4 selectors(原文标题是20,但实际只有19个) 译者:陈大鱼头 推荐理由:因为喜欢CSS啊 你不得不 💌 CSS 以下所有选择器的兼容性表格内容...

陈大鱼头
05/21
0
0
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
108
0
CSS hack大全之特殊符号的应用

由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开...

五月兰
2012/08/09
622
0
Visual Studio:Web Essentials详解

  【IT168技术】Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来。   首先,从Extension Manager里安装:最新版本是19号发布的2.5版   然后重启你的VS开...

作者:汤姆大叔
2011/12/01
0
0
CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。

本文转载于:猿2048网站CSS知识点整理(1):CSS语法,层叠次序,选择器,其他重要方面。 1. css的全称 2. CSS的层叠次序:优先级由低到高 ·浏览器设置 ·外部样式表 或者 内部样式表 —— ...

前端老手
08/30
11
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 人生,还真是到处是意外

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享lil peep的单曲《High School》 《High School》- lil peep 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
38分钟前
6
0
Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
6
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
10
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部