CSS教程系列五——常用的选择器

在上一篇教程中，我们了解到类非常灵活且功能强大，但我们在使用中却极容易过份依赖它。我们应该如何去避免类的滥用呢？我们可以通过使用“后代选择器”来减少类的使用。

最常用的选择器是类型选择器（或称作元素选择器、简单选择器）和后代选择器。

1.类型选择器。

这种类型的选择器已被我们熟知，它用来筛选特定类型的元素。如段落、锚或标题元素等。

p {color:black;}

a {text-decoration:underline;}

h1 {font-weight:blod;}

2.后代选择器。

后代选择器用来筛选特定元素或元素组的后代。后代选择器的表示方法很简单，在父选择器和子选择器之间加一个空格。举个例子。

p span {color:red;}

<p>这是第一段文字<span>这是被Span标记包围的文字，颜色为红色</span></p>

<span>这是第二段文字，颜色不变</span>

在上面的例子中被第一段文字中被Span包含的部分的颜色将是红色，其余文字颜色不变。

理解后代选择器的作用了吗？在第一段文字中Span是P的子代（或叫做后代），因为Span包含于P中。所以这段文字的颜色将是CSS中定义的红色。而第二段文字并非P的子代，所以不会应用样式，颜色不变。

现在你可以理解为什么我们不需要很多类了吗？不妨思考一下。

3.伪类

如果你之前没有接触过编程，伪类这个名字乍听起来有点怪。为什么会称作“伪”类呢？（日伪军是不是很熟悉，^-^）

伪类也是类，但它是固定的，CSS中事先定义好的，用来根据文档结构之外的其它条件对元素应用样式。比如链接的状态。它是类，但又不是我们通常意义上的类，所以称作伪类。

我们常用的伪类有四个，其它的一些伪类因在IE中不支持，所以一般不用。

这四个伪类是（伪类前有一个冒号）：

:link （链接） :visited （已访问的链接） :hover （鼠标停留状态） :active （激活状态）

其中前面两种称为链接伪类，只能应用于锚（a）元素。后两种称为动态伪类，理论上可以应用于任何元素。

例如，假设默认的标题颜色为黑，访问后是白色，鼠标停留时字体为红色，激活状态为黄色，那么CSS应该怎么写呢？

a:link {color:black;}

a:visited {color:white;}

a:hover {color:red;}

a:active {color:yellow;}

注意事项：这几个伪类组合的时候根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。可以记为“LoVe HAte”。

4.通用选择器

我觉得它就是个通配符，通用选择器用*表示，它一般用来对页面上所有元素应用样式。例如：让所有元素的填充和空白边置0。

* {padding:0;

margin:0;}

另外，通用选择器和其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。

5.高级选择器

IE对高级选择器基本上不支持，平时用到的很少，但功能却极为强大。此处略去。