CSS3与CSS2选择器比较

CSS3的选择器是很重要的内容。CSS选择器除了ID、 class,还有后代选择器、属性选择器等，准确而简洁地运用CSS选择器会达到非常好的效果。我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。

CSS2.0选择器的不足

在大型网站中,样式表中的代码可能会达到几千行。当整个网站或整个Web应用程序全部书写好之后,需要针对样式表进行修改的时候,在那么多的CSS代码中,并没有说明什么样式服务于什么元素,只是使用class属性,然后在页面中指定元素的 class属性。使用元素的class属性有两个缺点:第一, class属性本身没有语义,它纯粹是用来为CSS样式服务的,属于多余属性:第二,使用class属性,并没有把样式与元素绑定起来,针对同一个class属性,文本框也可以使用,下拉框也可以使用,甚至按钮也可以使用,这样是非常混乱的,修改样式很不方便。

CSS3选择器的优势

在CSS3中提倡使用选择器将样式与元素直接捆绑起来,这样的话,在样式表中什么样式与什么元素相匹配一目了然,修改起来也方便。不仅如此,通过选择器,还可以实现各种复杂指定,同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。

CSS3选择器最大的变换在于,使用选择器进行样式指定时.采用了类似E[foo$=“val”这种正则表达式的形式。在样式中,声明该样式应用于什么元素,该元素的某个属性的属性值必须是什么。例如,可以指定将页面中ID为“div_notext”的div元素的背景色设定为黄色,代码如下所示。

div[id=“div_notext”]{background:yellow;}

这样,符合这个条件的div元素的背景色会被设为黄色,不符合这个条件的div元素则不使用这个样式。

另外,还可以指定样式使用“^”通配符(开头字母匹配)、“？”通配符(结尾字符匹配)与“*”通配符(包含字符匹配)。例如,指定id末尾字母为“d”的div元素的背景色为蓝色,代码如下。
div[id$=“t”]{backgroud:blue;}

通过通配符的使用,进一步提高了样式表的书写效率。

class和ID都可以使“单一选择符”有不同的样式,二者主要的区别在于:id只能用来定义单一元素,定义两个以后,页面不会出现什么问题,但是W3C检测的时候认为页面不符合标准;class是类,同一个class可以定义多个元素。就页面效果而言,二者的视觉效果几乎无差别。