玩转CSS选择器（二）之浏览器支持，常见Bug，性能优化

492 查看

前言

上一篇系列文章整理了CSS选择器的基础使用方法，因为内容较多且细致，写了很多DEMO，目前将它整理成适合移动端浏览器的CSS选择器的参考手册，方便学习CSS的人参考使用，马上就要搞定了，之后会放出 (笑脸)。

本节内容会跟着上一节的内容继续完善，首先会补充CSS选择器的浏览器支持情况（主要是说IE），比如我们最常用的s1,s2,…,sN群组选择器在IE7时才被支持，并且IE7还支持了很多我们没有想到的选择器，如子元素选择器，属性选择器，了解后你会发现IE7还是挺了不起的。

之后还会补充平常使用选择器遇到的一些问题以及解决方案，最后了解浏览器是如何读取选择器的，怎样使用选择器能达到高效率。

浏览器支持

了不起的IE7

当我们在开发网页时，如果网页需要兼容IE6，那么自然地会把IE6和IE7浏览器归为一路货色，对于不兼容的选择器和属性都将不再考虑使用，可是你是否知道IE7相比IE6增加了许多选择器可以用，如群组选择器，相邻选择器，兄弟选择器，属性选择器。

以下选择器是不支持IE6，仅支持 IE7 及以上的浏览器

基本选择器

选择器	描述	版本
s1,s2,…,sN	群组选择器，同时匹配所有s1元素或s2元素	2.1
E > F	子元素选择器，匹配所有E元素的子元素F	2.1
E + F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F	2.1
E ~ F	匹配任何E标签之后的同级F标签	3

属性选择器

选择器	描述	版本
E[attr]	匹配att属性的E元素	2.1
E[attr=”val”]	匹配att属性且属性值等于val的E元素	2.1
E[attr~=”val”]	匹配att属性且属性值中的词列表有一个等于val的E元素	2.1
E[attr^=”val”]	匹配att属性且属性值为以val开头的字符串的E元素	3
E[attr$=”val”]	匹配att属性且属性值为以val结尾的字符串的E元素	3
E[attr*=”val”]	匹配att属性且属性值为包含val的字符串的E元素	3
E[att\|=”val”]	匹配att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素	2.1

在IE7浏览器，单复选框的checked在属性选择器中是不被支持的，这部分内容会在下面的常见问题中详细说明。

伪类选择器

选择器	描述	版本
E:hover	设置元素在其鼠标悬停时的样式	2.1
E:first-child	匹配父元素的第一个子元素E	2.1

E:hover在IE6中只有a元素可用

伪元素选择器

选择器	描述	版本
E:first-letter	选择文本块的第一个字母	2.1
E:first-line	选择元素的第一行	2.1

平庸的IE8浏览器

虽然来到IE8的时代，但是对于新选择器的支持并不多，不过还好我们最常用的E:before和E:after配合content属性都在IE8中得到了很好的支持。

以下选择器不支持IE6，IE7，仅支持 IE8 及以上的浏览器

伪类选择器

选择器	描述	版本
E:focus	设置对象在成为输入焦点时的样式	2.1

伪元素选择器

选择器	描述	版本
E:before	在元素前面插入内容，配合”content”使用	2.1
E:after	在元素后面插入内容，配合”content”使用	2.1

狂拽炫酷*炸天的IE9

IE最好的时代就是迎接CSS3的到来，从IE9支持了一大坨新CSS3的伪类以及伪元素，我就勉强给IE使用上这个酷炫点的修饰语。

以下选择器不支持IE6，IE7，IE8，仅支持 IE9 及以上的浏览器

伪类选择器

选择器	描述	版本
E:checked	匹配用户界面上处于选中状态的元素E	3
E:enabled	匹配用户界面上处于可用状态的元素E	3
E:disabled	匹配用户界面上处于禁用状态的元素E	3
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素	3
E:last-child	匹配父元素的最后一个子元素E	3
E:nth-last-child(n)	匹配父元素的倒数第n个子元素E	3
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E	3
E:nth-last-of-type(n)	匹配同类型中的倒数第n个同级兄弟元素E	3
E:first-of-type	匹配同类型中的第一个同级兄弟元素E	3
E:last-of-type	匹配同类型中的最后一个同级兄弟元素E	3
E:only-child	匹配父元素仅有的一个子元素E	3
E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素E	3
E:empty	匹配没有任何子元素（包括text节点）的元素E	3
E:not(s)	匹配不含有s选择符的元素	3
E:target	匹配文档中特定”id”点击后的效果	3

伪元素选择器

选择器	描述	版本
E::first-letter	选择文本块的第一个字母	3
E::first-line	选择元素的第一行	3
E::before	在元素前面插入内容，配合”content”使用	3
E::after	在元素后面插入内容，配合”content”使用	3
E::selection	设置对象被选择时的样式	3

让IE6-8支持伪类和属性选择器

如何才能让IE6~8支持CSS3伪类和属性选择器，也许你已经想到了，我们会用JavaScript工具来进行辅助，那么刚好|8e50989464f7517425e2c31ba2d6dd59424|就可以完成这件事情，而且使用起来很简单，只要把selectivizr.js引入到页面上就可以了，如下：

<!- -[if (gte IE 6)&(lte IE 8)]>

<![endif]- ->

但是使用它还有一些注意事项：

必须要引用一个JavaScript库，比如jQuery
只能解析<link>标签引入的样式，如果是<style>定义的样式是不会解析的
动态生成的DOM不会做二次映射
需要在标准模式的DTD才能够生效

项目地址：http://selectivizr.com

常见问题与Bug

`*` 通配符造成继承失效

* {

color:red;

}

#test{

color:blue;

}

</div>

▲ 最终text的颜色却是红色的

按照我们的理解， id 的优先级是高于 * 通配符的，而文字也本应该继承 id 元素的color值，所以最终的文字应该是蓝色呀。

所以这里混淆了一个概念，继承的样式的优先级永远低于元素本身的样式，包括通配符选择器，所以大家在开发中，应该尽可能的避免滥用通配符，以免带来一些隐性问题。

关于这个问题，还可以参考《关于CSS特殊性的问题》

而在IE6及更早浏览器并不支持通配选择符(*)，只是将它忽略了，所以也变相的能看到效果。

E:hover 失效

E:hover 伪类用于设置元素在其鼠标悬停时的样式，但是在某种情况会导致效果失效，如下:

#test {

background:red;

}

#test div {

display:none;

}

#test:hover div{

display:block;

background:yellow;

}

1	<div id="test">触发我<div>看到我了吧</div></div>

▲ 当触发 #test:hover 时，此效果是在IE6中是无效的，因为在IE6中， E:hover 伪类仅能用于a（超链接）对象，且该a对象必须要拥有href属性。

E:hover 还有一种失效的状态，是大家最常见的，代码如下：

a:link {color:gray;}

a:hover{color:green;}

a:visited{color:yellow;}

a:active{color:blue;}

1	<a href="#nogo">文字</a>

▲ 当超链接处于 a:hover 时，你会发现其效果是无效，文字的颜色不会变成绿色，这是因为超链接的伪类样式书写是有固定顺序的，不能颠倒，这四个属性正确的定义顺序为：

a:link {}

a:visited {}

a:hover {}

a:active {}

E:focus 失效

#test:focus + p {

font-weight:bold;

}

1 2	<button id="test">点击我触发focus</button> <p>文字</p>

▲ 当点击 button 按钮触发 :focus 时将邻近元素的文字进行加粗，但是这个效果在IE8是失效的，如何来修复它呢，只需要添加一个空的 :focus 选择器，如下：

#test:focus + p {

font-weight:bold;

}

#test:focus {}

E:first-line 失效

如果在当前选择器内使用了 !important ， :first-line 伪类内部的定义的属性会被完全忽略，示例：

p {

color:blue;

}

p:first-line {

color:red !important;

}

1	<p>第一行文字，<br/>第二行文字</p>

▲ 正常情况下第一行的文字会变成红色，但是在IE8浏览器却忽略它没有任何变化，如何来解决这个问题呢，把 !important 去掉就好了，如下：

p {

color:blue;

}

p:first-line {

color:red;

}