IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。选择器是CSS3中一个重要的内容，使用它可以大幅度地提高开发人员书写或修改样式表的效率。在大型网站中，样式表中的代码可能会达到几千行，而当我们需要对样式进行修改时，并没有说明什么样式服务于什么元素，只是在元素中使用了class属性。而class属性本身没有语义，它纯粹是用来为CSS服务的，属于多余属性。CSS3提倡使用选择器来将样式与元素直接绑定起来，这样一来，在样式中什么样式与什么元素相匹配就变得一目了然，修改起来也很方便。不仅如此，通过选择器我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，使得最终书写出来的样式表变得简洁明了。

1  基本选择器

CSS是一种用于屏幕上渲染HTML的语言，它主要是在相应的元素中应用样式来渲染相对应的元素，那么如何选择相应的元素就显得很重要了。这时可以应用选择器。选择器主要用来确定HTML的树形结构中的DOM元素节点。可以把CSS选择器分为基本选择器、属性选择器、伪类选择器等几个部分。基本选择器如表1所示。

表1  CSS3基本选择器及实例

2  多元素的组合选择器

多个选择器可以组合在一起使用，其组合形式有多种，包括多元素选择器、后代元素选择器、子元素选择器、毗邻元素选择器、同级元素通用选择器5种类型，如表2所示。

表2  CSS3多元素的组合选择器及实例

3  属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择具有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。在CSS2.1中就引入了一些属性选择器，如表3所示。

表3  CSS2.1属性选择器及实例

在CSS3中增加了一些属性选择器，使用CSS3的属性选择器，既可以只指定元素的某个属性，也可以同时指定元素的某个属性及其对应的属性值。CSS3的属性选择器如表4所示。

表4  CSS3属性选择器及实例