第19章选 择 器
19.1 选择器概述19.2 属性选择器
本章针对CSS 3中使用的各种选择器进行详细介绍,通过选择器的使用，你不再需要在编辑样式时使用多余的以及没有任何语义的class属性，而是直接将样式与元素绑定起来，从而节省大量在网站或Web应用程序已经完成之后修改样式时所需花费的时间。学习内容：
19.1 选择器概述
选择器是CSS 3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。
在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。麻烦的是，当整个网站或整个Web应用程序全部书写好之后，需要针对样式表进行修改时，在洋洋洒洒一大篇CSS代码之中，并没有说明什么样式服务于什么元素，只是使用了class属性，然后在页面中指定了元素的class属性。但是，使用元素的class属性有两个缺点：第一，class属性本身没有语义，它纯粹用来为CSS样式服务，属于多余属性；第二，使用class属性的话，并没有把样式与元素绑定起来，针对同一个class属性，文本框也可以使用，下拉框也可以使用，甚至按钮也可以使用，这样其实是非常混乱的，修改样式时也很不方便。
所以，在CSS 3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也变得简洁明了。
具体来说，使用选择器进行样式指定时，采用类似E[foo$="val"]这种正则表达式的形式。在样式中，声明该样式应用于什么元素，该元素的某个属性的属性值必须是什么。例如，我们可以指定将页面中id为“div_Big”的div元素的背景色设定为红色，代码如下所示。
div[id="div_Big"] {background: red;}
这样，符合这个条件（id为“div_Big”）的div元素的背景色被设为红色，不符合这个条件的div元素不使用这个样式。
另外，我们还可以在指定样式时使用“^”通配符（开头字符匹配）、“？”通配符(结尾字符匹配)与“”通配**符（包含字符匹配）。如指定id末尾字母为“t”的div元素的背景色为蓝色，代码如下所示。
div[id$="t"] {background: red;}
使用通配符能大大提高样式表的书写效率。
相关资源：七夕情人节表白HTML源码(两款)