文档章节

脱离IE6的时代必懂的CSS选择器,不能太依赖Jquery

刘二森
 刘二森
发布于 2014/12/10 23:35
字数 806
阅读 19
收藏 0

一、IE7支持的CSS选择器

1、* :通配符选择器

image

经常用来清理浏览器的默认样式,当然我们有更高效的做法,例如使用reset.css或者nomalize.css来处理这个问题。

没有兼容性问题。

2、#id : id选择器

image

id选择器是最高效的选择器,但是ID在同一个页面只有唯一一个。

没有兼容性问题。

3、element : 标签选择器

image

选择相应的标签,这个选择器适合进行通用的设置。

没有兼容性问题。

4、element1 element2 : 标签组合选择器

image

p下的所有span标签样式都会受影响。

没有兼容性问题。

5、.class1 : 类选择器

image

对设置了class的标签设置新式,它会选择同一类的标签出来设置样式。效率比id慢。

没有兼容性问题。

6、.class1.class2[.class3 …..] : 多类选择器

image

只有同时设置了class1与class2的标签才能被匹配设置样式。

window XP下的IE6之前不支持多类选择器,在IETest中没法测试出来,因为你用win7的。

7、:link, :visited, :hover, :active : 伪类选择器

image

以上的顺序不能错。

IE6只有a标签才支持这些伪类。

到此以上都是我现在开发使用的所有选择器,很是惭愧。

8、element1 > element2 : 子元素选择器

image

image

只匹配element1元素的直接子元素element2,例子中只匹配.list下的ul而不匹配li下的ul。

IE7以上支持,大胆用吧。

9、element1 + element2 : 毗邻元素选择器

image

image

image

选择紧跟着element1的element2元素,例子中为内容为3的li元素,紧跟的意思就是它的下一个元素一定要是element2。

IE7和IE8在标准模式下以上的浏览器支持。在IE7下编写HTML要使用标准来写,不然IE7标准模式下的渲染会出现bug。

10、element1 ~ element2 : 兄弟选择器

image

image

image

为目标元素element1之后的所有兄弟元素element2添加样式。

11、[attr] : 属性选择器

image

image

image

为拥有目标属性的元素设置样式。

IE7、IE8以上非怪异模式支持。

12、[attr=xxxxx] : 属性选择选择器

image

image

image

为目标属性值为xxxx的元素设置样式。

IE7以上支持。

13、[attr~=xxxxx] : 属性包含选择器

image

image

image

选择属性中有包含XXXXX单词的元素设置样式,记住,是单词,以空格分隔。

IE7以上支持。

14、[attr|=xxxxx] : 属性开头选择器

image

image

image

选择属性中以xxxxx单词开头的元素设置样式,记住,是单词,而且是以-为分隔符。

IE7以上支持。

以上是用于兼容IE7以上使用的选择器,其实有用的就是兄弟选择器和属性选择器。

二、参考来源

1、选择器兼容表

  • 绿色 / √  表示目前支持。

  • 橙色/ Δ   表示浏览器部分支持当前CSS选择器。

  • 红色/ Χ   表示浏览器完全不支持。

2、http://msdn.microsoft.com/zh-cn/library/cc351024(en-us).aspx IE5~IE8对CSS2.1 和 CSS3属性的支持情况。

© 著作权归作者所有

刘二森
粉丝 0
博文 1
码字总数 806
作品 0
佛山
私信 提问
现代浏览器中内置的可以等效替代jQuery的功能

jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的。当然,jQuery不是铁板一...

oschina
2013/05/27
7.2K
31
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
7 个你可能不知晓的 jQuery 插件

最近你一定注意了,jQuery 插件怎么那么多呢?这也不能怪我,人家就是多,且看着吧。 本文再来 7 个比较小众的插件,或许你不知晓。 Spin.js Spin.js 使用 CSS3 来生成如上图的界面,IE下使用...

红薯
2011/08/25
2.9K
6
vue.js--换一种思路实现tab选中(不操作dom)

 实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式,让active有...

刘昌鑫
2017/10/27
0
0
20 个用于处理页面滚动效果的 jQuery 插件

对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性。如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果。幸运的是有各种各样的jquery 滚动插件可...

oschina
2013/11/01
43.8K
22

没有更多内容

加载失败,请刷新页面

加载更多

解决vim打开之后乱码的问题

在Windows中的文档,传输到Linux系统中(使用rz命令),出现乱码 root@localhost ~]# rpm -qf `which iconv` glibc-common-2.17-105.el7.x86_64 [root@localhost ~]# rpm -ihv /mnt/Packages......

寰宇01
28分钟前
1
0
aldi 2017年1月记录

../../tools/CBLAS/lib/cblas_LINUX.a ../../tools/lapack-3.4.2/liblapacke.a \../../tools/lapack-3.4.2/librefblas.a -lgfortran \../../tools/lapack-3.4.2/liblapack.a \../../......

MtrS
29分钟前
2
0
Choerodon如何进行日志收集与告警

作者:董文启 应用程序日志是由软件应用程序记录的事件文件, 它一般包含错误,信息事件和警告。一个良好的日志系统有助于快速发现问题,定位问题,同时也为业务分析起到一定的作用。 传统E...

Choerodon
41分钟前
2
0
js二维码生成插件“jquery.qrcode.min.js”

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>生成二维码</title> <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></scri......

泉天下
44分钟前
1
0
Spring AOP之同一个对象方法内部自调用导致事务失效问题

对于像我这种喜欢滥用AOP的程序员,遇到坑也是习惯了,不仅仅是事务,其实只要脱离了Spring容器管理的所有对象,对于SpringAOP的注解都会失效,因为他们不是Spring容器的代理类,SpringAOP,就切入不...

xiaomin0322
51分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部