一、为何专门说起IE7

以前，或者说数年前，我们从事桌面端网页开发的时候，基本上都还要兼顾IE6浏览器, 即使有些特性，IE7支持，我们也会忽略之。于是，我们会不自然地把IE6和IE7浏览器归为一路货色，研究的多半是两个浏览器共性的东西，比方说haslayout之类的。

但是，最近1~2年，至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了，但是，还是要关心IE7浏览器(3%+)的。虽然，我们有丰富的处理IE6浏览器的经验，但是，当我们不要管IE6浏览器的时候，我们前端技术的选型上就不能停留在数年前的那个套路上，我们应该与时俱进，大力挖掘IE7浏览器的潜力。

根据我的一些研究与实践，IE7浏览器的一些特性和潜力还是很惊人的，但就选择器这一块，我们就能玩很多事情，如相邻父子选择器，相邻和不相邻兄弟选择器，以及本文要专门细说的属性选择器。

OK，为何要专门讲IE7浏览器下的CSS属性选择器呢？哈哈，那是因为有趣的事情还真不少！

二、CSS属性选择器简介

什么是属性选择器呢？就是根据DOM元素的属性选择对应的元素。大致有下面的用法：

[attr]
[attr=val]
[attr^=val]
[attr$=val]
[attr*=val]

以上选择器，实际上是归属于CSS3选择器的，范畴。嘿，令人惊奇的是，IE8浏览器甚至IE7浏览器也支持以上这些选择器，没错，包括属性正则判断，也是支持的。

哟，你还不信？

那我们实例走起，您可以狠狠地点击这里：IE7与CSS属性选择器测试Demo

如下CSS和HTML:

span[id=aaa] { color: #cd0000; }
span[id^=b] { color: #cd0000; }
span[id*=c] { color: #cd0000; }
span[id$=d] { color: #cd0000; }

<span id="aaa">颜色是红色支持[id=val]</span>
<span id="bbb">颜色是红色支持[id^=val]</span>
<span id="ccc">颜色是红色支持[id*=val]</span>
<span id="ddd">颜色是红色支持[id$=val]</span>

结果逆市上扬，全线飘红：

“我去？”有人会疑问了，“既然IE7这回咸鱼翻身、光宗耀祖了，那还有什么好吐槽的呢”！

所谓“人算不如IE算”，天真的我们天真的认为事情就这么happy ending了！实际上，精彩的故事才刚刚开始。上面Demo之所以支持，因为我们使用了一个非常常用的属性id做示意的，DOM元素的原生属性何其多，你能保证IE7都照顾得来？

三、IE7浏览器不认识原生的[checked]属性

[checked]属性大家应该都知道，对吧，一般平常我们用在单选框/复选框上，表示是否选中，例如：

/pre>

然而，就是这个其貌不扬的[checked]属性，在IE7那里确是不支持的，哦，抱歉，说话要严谨，是：IE7浏览器下，单复选框的[checked]作为属性选择器不支持。注意，一定是单选框(type=radio)或者复选框(type=checkbox)元素才这样。比方说<div>, <span>元素上挂一个[checked]属性选择器，依然是能识别的。如下CSS和HTML代码：

[checked] { color: #cd0000; }
[checked] + span { color: #cd0000; }

<span checked>颜色是红色则支持</span>
<input type="radio" checked><span>颜色是红色则支持</span>

结果呢，现代浏览器们自然不用说，就说IE8浏览器下，也都是全线飘红，[checked]属性选择器全支持：

但是，本文的男主角，IE7浏览器则 , 似乎不支持单选框[checked]属性选择器：

不完美了，生活不美丽了。

IE7啊，IE7，枉我对你抱有期望，没想到，期望越大，失望越大。你说，你这么搞，我想根据[checked]属性模拟自定义的单复选框效果，就实现不了了啊，你怎么就不争气呢！！

很多时候，父母怪孩子不听话，其实没有发现孩子那与众不同之处，没有因材施教。

我们一窥IE7浏览器下对checked属性的HTML渲染，会发现，完全大写化了，和<span>元素上非原生的小写checked属性完全不一样：

而高版本IE浏览器下则没有这样的区分。也就是IE7浏览器似乎对单选框的checked属性特殊对待了，究竟背后藏了怎样的故事呢？

或许，我们可以等待后人来解答！………………你以为是这样的故事套路吗？错！我现在就要告诉你背后的故事。

如果我们窥探jQuery prop()方法的源码，会发现，有个关键字非常抢眼，什么关键字呢？当当当当……就是defaultChecked.

也就是，虽然，IE7浏览器表面上，我们看到的是checked属性，实际上，背后运作的是defaultChecked属性，因此，对于单复选框，对于IE7浏览器，就不要指望[checked]选择器了，试试[defaultChecked]属性选择器？

[defaultChecked] + span { color: #cd0000; }

结果，IE7浏览器又开始放光彩了，百闻不如一见，您可以狠狠地点击这里：IE7浏览器[checked]/[defaultChecked]属性选择器Demo

结果，IE7浏览器东边不亮西边亮：

OK, 所以，这下大家应该知道，遇到IE7表单元素不认识[checked]属性选择器问题时候改怎么办了吧~~

四、IE7浏览器认识原生的[disabled]属性吗？

同样是表单元素的原生属性，既然IE7不识[checked]属性选择器，那是否也不认识[disabled]属性选择器呢？

很好的问题！

究竟认不认识呢？哈，大家放心，对于[disabled]属性选择器，IE7浏览器没有那么多花头，支持很纯正，大家放心使用。

不放心的话，您可以狠狠地点击这里看个究竟：IE7浏览器支持[disabled]属性选择器Demo

结果IE7浏览器下，顺利飘红：

五、IE7浏览器矫情之没有标签等不认爹

本来，对吧，我们差不多认为，IE7关于属性选择器的故事就这么尾声了，但是，有句话怎么说来着？“贱人就是矫情！”

关于属性选择器，IE7还有一个矫情的地方，就是部分[attr=val]的选择器，如果前面没有标签选择器或类名选择器等选择器的时候，属性选择器就没有作用。

例如，这样一个CSS代码：

[type=checkbox] { opacity: 0.5; filter: alpha(opacity=50); }

所有复选框透明度50%, 没错吧。

但是，IE7浏览器下，不认识。

但是，我们稍作修改

input[type=checkbox] { opacity: 0.5; filter: alpha(opacity=50); }

IE7浏览器都认爹认得麻溜的很！

我们直接看例子吧，您可以狠狠地点击这里：IE7浏览器没有标签不认爹Demo

从上面截图可以看出，纯粹的[type=checkbox]在IE7浏览器下，并没有改变复选框的透明度；而加了input标签选择器的单选框却半透明了。这里，不仅是input标签选择器，使用类似.class类名选择器也是可以生效的。

而且，并不是所有的属性是这样，type属性就是其中一个，例如id属性，则是正常的，[id=xxx]IE7浏览器是能识别的。为何有些属性可以，有些不可以，究竟背后藏了怎样的故事呢？

或许，我们可以等待后人来解答！………………你以为是这样的故事套路吗？没错！就是这样的套路，此现象我还没深究。

六、hold不住了，结束语

明天端午节，就是屈原跳水的日子，然后今天大盘很应景，也跳水了，呵呵呵！

我靠，我怎么又在废话了。上了年纪了，完全扛不住了，以前松松忙到2-3点的状态是一去不复返了。

我要去睡觉觉了，感谢阅读，行为仓促，错误在所难免，欢迎指正，不甚感激！

也欢迎补充IE7浏览器关于属性选择器的其他精彩现象！

更多吐槽，等哪天时间充足的时候。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址：http://www.zhangxinxu.com/wordpress/?p=4843

(本篇完)

建议继续学习：

1. 前端必须掌握30个CSS3选择器    (阅读：4121)
2. jQuery选择器探讨进阶    (阅读：3290)
3. jQuery之find选择器    (阅读：3244)
4. IE7 form中input背景图片失效的解决    (阅读：3061)
5. CSS选择器    (阅读：2824)
6. 自己实现的简单的html元素选择器，类似jquery选择器，比jquery选择器还要快！    (阅读：2783)
7. 推荐三十款CSS样式选择器代码    (阅读：2682)
8. 一种基于匹配回朔的 css3 选择器引擎实现    (阅读：2680)
9. jQuery选择器对应的DOM API ——选择元素    (阅读：2017)
10. IE7中js的执行顺序    (阅读：1837)