作者：武利剑

标准参考

关于属性选择器

选择拥有指定属性的元素。

属性选择器有以下四种方式：

• [att]:选定设置了 att 属性的元素，不管设定的值是什么
• [att=val]:选定 att 属性的值设置为 val 的元素
• [att~=val]:表示一个元素拥有属性 att ，并且该属性含有空格分隔的一组值，其中之一为 'val'
• [att|=val]:表示一个元素拥有属性 att ，并且该属性含 'val' 或以 'val-' 开头

关于属性选择器的详细信息，请参考 CSS2.1 规范 5.8 Attribute selectors 中的内容。

问题描述

CSS 2.1 规范中描述的若干种选择器，在 CSS 1 历史规范中均无规定，这导致早期版本的浏览器，如： IE6 IE7(Q) IE8(Q) 不支持属性选择器。

造成的影响

当使用了属性选择器后，可能会使页面在 IE6 IE7(Q) IE8(Q) 中的无法得到预期效果，因而跟其他浏览器产生差异。

受影响的浏览器

IE6 IE7 IE8

问题分析

对于此问题，我们通过以下的测试用例来说明。

分析以下代码：

<style type="text/css"> p[id] { color: red; } </style>
                <p id="aloha">Aloha!</p>

• 样式中使用了属性选择器 [att]:p[id]
• 含有 'id' 属性的 P 元素将被选中；

根据 CSS2.1 规范中的描述可知，文本 'Aloha!' 将被置成红色。

这段代码在不同的浏览器环境中的表现：

IE6 IE7(Q) IE8(Q)	IE7(S) IE8(S) Firefox Opera Safari Chrome

所以对于属性选择器的支持情况，如下表：

IE6 IE7(Q) IE8(Q)	IE7(S) IE8(S) Firefox Safari Opera Chrome
N	Y

【注】：实际中其他除常用 HTML 标记同样适用此例，并非仅 P 标记自身不支持，此文中不在一一测试证明。

解决方案

避免在 IE6 IE7(Q) IE8(Q) 中使用属性选择器。

参见

知识库

• ...

相关问题

• ...