网络中css,CSS 中的选择器 （一）

记不清是什么时候学会用 CSS 的了，应该是很晚的事了，反而认识 CSS 却是记得很清楚，记得在很早的时候(我初学做网页的时候)，我的一个计算机老师跟我说，以后网页的趋势就是 Html + CSS ，因为CSS能更好的控制页面布局、控制重复出现的页面元素，更好的配合动态网页，当时很不理解，觉得有 Frontpage 、Dreamweaver 里面的模板还有著名的 TABLE(当时大都还是用表格控制布局)还要那玩意干什么呢？

那时候的我天真的以为互联网未来的发展趋势就是 ASP + TABLE，于是乎下定决心一定要学好 ASP + TABLE，白驹过隙，时光荏苒，结果我最终沉迷于各种ASP驱动的论坛中而迷失了网页制作的本质…….略微感慨，稍稍纪念我那逝去的青春。

适应潮流的就是先进的，后面的 web 设计和制作编年史我就不赘述了，大家都知道CSS + HTML 大行其道，作为页面渲染的主要手段，不论你作为一个 Designer 还是一个 Coder 只要你靠网页吃饭，那你都应该学一学 CSS ，下面仅将我自己在 CSS 中的一点学习经验稍作总结，以免日后觉得我现在是在虚度光阴。

说到学CSS，当然要从选择器开始，起码一般的教程都是由此开始的。

CSS 选择器的定义

也不知道这个百度百科词条是哪个哥们编辑的，竟然连个定义都没有，一看就不是九年制义务教育熏陶出来的，起码我们的课本教我们应该是先简介再定义后用途又举例的。

我的定义：CSS 选择器简单的说就是对网页中的元素的抽象性的归类，就像小学里面的学生按学龄分类为一年级到六年级，按性别分类为男生、女生等等等等。欢迎补充！

选择器的种类

严格来讲，选择器的种类可以分为三种：标签选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。其他几种选择器基本上是由这三种组合产生。

CSS 基本选择器

标签选择器

如：p td tr h1 h2 span a

ID选择器

如：#main #sidebar #footer #header

类选择器

如：.post .content .widget

CSS 标签选择器的使用

CSS代码:

p{color:red;}

HTML代码:

我是标签小红

CSS代码:

p{color:red;}

HTML代码:

我是标签小红

演示：

我是标签小红

CSS ID选择器的使用

CSS代码:

#testid{color:red;}

HTML代码:

我是ID小红

CSS代码:

#testid{color:red;}

HTML代码:

我是ID小红

演示：

我是ID小红

CSS 类选择器的使用

CSS代码:

.testclass{color:red;}

HTML代码:

我是类小红

CSS代码:

.testclass{color:red;}

HTML代码:

我是类小红

演示：

我是类小红

总结

有时候就是这么简单，

今天搞定3个，明天你就能拓展9个，

CSS没有那么难，难的是你不想学。

有了选择器，我们就拥有了页面，因为页面大都是通过选择器来分割开设置渲染的。

未完待续………………………

本系列其他文章：

CSS 中的选择器 (二)- 组合选择器