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对高级选择器基本上不支持,平时用到的很少,但功能却极为强大。此处略去。

4 条评论:

GG 说...

晕,写的真快。跟不上躺了……才看到第三篇……中间扯点实例之类什么的,降低点速度哈~~:-D

Bay 说...

应该再加点,ie6及其以前版本虽然不像firefox是标准浏览器,但ie7已经非常接近标准了,对高级选择器,比如子选择器,兄弟选择器,属性选择器,都已经支持了,这对我们来说是非常兴奋的事,这些高级选择器功能非常实用,为何不详细介绍下呢。

匿名 说...

真不要脸 CSS MASTERY里一模一样的内容 也好意思说是自己写的

咖啡鱼 说...

你有认真读过吗?