7.3　对XML文档有效的CSS选择器

定义一个CSS样式时，大部分情况下只需指定一个Selector（选择器），表示对符合该选择器规则的HTML元素起作用，但也可以出现指定多个选择器的情形。如果有多个选择器，则该CSS样式可对多批HTML元素起作用。同时指定多个选择器的语法格式如下：

也就是说，多个选择器之间以英文逗号（,）隔开即可。

对XML文档有效的只有属性选择器，而且对属性选择的支持也非常有限。

属性选择器一共有如下几种：

　Tag {…… }：指定该CSS样式对所有Tag元素起作用。

　Tag[ attr ] {…… }：指定该CSS样式对具有attr属性的Tag元素起作用。

　Tag[ attr=value ] { …… }：指定该CSS样式对所有包含attr属性，且attr属性的值为value的Tag元素起作用。

　Tag [ attr ~=value ] { …… }：指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的一系列值，其中某个值为value的Tag元素起作用。

　Tag [ attr |=value ] { …… }：指定该CSS样式对所有包含attr属性，且attr属性的值为以连字符分隔的一系列值，且第一个值为value的Tag元素起作用。

上面这几个选择器的作用优先顺序是依次升高的，即对于包含abc属性的<div…/>元素，如果其属性值为xyz，则以div[abc=xyz]选择器定义的CSS样式会覆盖div[abc]所定义的CSS样式，而对于div[abc=xyz]选择器定义的CSS样式中没有定义的属性，div[abc]选择器所定义的CSS样式依然会作用于包含abc属性且值为xyz的<div…/>元素。

注意

上面这几种属性选择器并没有得到所有浏览器的广泛支持，只有第1种形式可以在所有浏览器中运行良好，而最后2种CSS选择器在很多浏览器中都得不到很好的支持。如果需要让CSS在所有浏览器中都运行良好，建议仅使用第一种形式。

属性选择器并不是所有的浏览器都支持，例如Internet Explorer 6.0就无法完全支持下列页面中包含的所有选择器：

程序清单：codes\07\7.3\propertySelector1.html

上述页面在Firefox中的浏览效果如图7.5所示：

图7.5　属性选择器的CSS样式

提示

在Internet Explorer 6中看不到该效果，因为Internet Explorer 6只支持第1种属性选择器。

从图7.5中可以看到，虽然div[id=xx]选择器定义的CSS样式并没有定义高和宽，但<div id="xx"…/>元素依然具有指定高度和宽度，这表明该<div…/>元素的显示外观是多个CSS样式“迭加”作用的结果。

注意

当多个CSS样式定义都可以对某个HTML元素起作用时，该HTML元素的显示外观将是多个CSS样式定义“迭加”作用的结果。如果多个CSS样式定义之间有冲突，则对于冲突属性以优先级更高的CSS样式定义取胜。

对于XML文档而言，CSS只对第一种属性选择器有较好的支持。

提示

本节主要介绍了几种对XML文档有效的选择器，至于CSS所支持的更多选择器语法，以及各种CSS属性的功能和用法，读者可以参考疯狂Java体系的《疯狂Ajax讲义》第5章。本节和《疯狂Ajax讲义》第5章有部分知识点重合，《疯狂Ajax讲义》第5章主要侧重于CSS样式对HTML页面的作用效果，本节则主要侧重于CSS对XML文档的作用效果。