CSS网页页面制做实例教程:访问器与CSS挑选器对应

2021-01-20 13:02 jianzhan
1)有关子挑选器 ( > )
在ie7+规范方式,chrome,ff下刚开始适用了。有人说在ie7下,假如父元素与子元素之间有注解的话就会无效,可是我沒有发现。
2) 邻近弟兄挑选器(+)
在ie7+规范方式。chrome,ff下刚开始适用了。可是,假如父元素与子元素之间有注解的话就会无效。ie8沒有。
3)一般弟兄挑选器(~)
挑选该元素后边的全部弟兄连接点,在ie7+规范方式,chrome,ff下适用。它和邻近弟兄连接点挑选器的差别便是,前者就挑选后边全部的,不必求邻近,可是后边务必是邻近,且挑选1个。

CSS 2.1

↓ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta ↑ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta * Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E > F No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E:first-child No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E:hover Partial(1) Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E:focus No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E + F No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr~="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E:before No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes E:after No No Yes Yes Buggy(4) Yes Yes Yes Yes Yes Yes Yes CSS 3 ↓ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta ↑ Selector / Browser → IE6 IE7 IE8 IE9 preview FF 3 FF 3.5 FF 3.6 Safari 3 Safari 4 Chrome 5 beta Opera Opera 10.5 beta E ~ F No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr^="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr$="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr*="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E[attr|="name"] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes E:root No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:nth-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:nth-last-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:first-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:last-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:only-of-type No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:only-child No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:last-child No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:nth-child No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:nth-last-child No No No Yes No Yes Yes Yes Yes Yes Yes Yes E:empty No No No Yes Yes Yes Yes Buggy(2) Yes (3) Yes Yes Yes E:target No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:checked No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E::selection No No No Yes No No No Yes Yes Yes Yes Yes E:enabled No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:disabled No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes E:not(s) No No No Yes Yes 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] 和IE81样,值为空或写错的情况下,失效;
E[attr~=val]这里唯1必须留意的是,特性的值,区别尺寸写;
E[attr|=val]IE7有1些尺寸写比较敏感的难题,可是一般能够一切正常应用;
:first-child IE7 会将1个注解或文本连接点当做first-child,而并不是仅有元素才是“子”元素。因此,假如在第1个子元素前有注解或文本,IE7会配对之而并不是去配对第1个子元素。
Safari/Chrome
Safari3.2(客观事实上能够追溯到3.1)以上的版本号早已彻底的适用全部CSS挑选器了。
Safari3.0基础上对CSS 2的挑选器适用很好,但不适用CSS3绝大多数新增的挑选器,并且对特性挑选器的适用并不是很详细。
iPhone中的Safari有3.0和3.2两个版本号,对CSS的适用状况与PC/Mac版的适用状况1致。
Android系统软件自带的访问器基础上也是根据webkit关键的,其针对CSS挑选器的适用状况待测。