CSS教程系列四——ID和类

尽管所有的Html标记都可以用作选择符，但是现实中我们仍需要实现更加精细，更加复杂的目的。例如：有三个段落，我们希望每个段落有不同的颜色。以前我们用类型选择符定义段落颜色，代码会这样写：p {color:red;} 但是这条规则只能让所有的段落字体变成红色。这时我们就用到了ID和类。

1.ID和类的规则及使用方法

（1）定义ID

#名称 ｛属性：值;｝

（2）定义类

.名称 {属性:值;}

它们跟以前的选择符格式上差不多，ID前面加一个#号，类名前面加一个点（半角）。

2.ID和类的命名

在命名上，ID和类是随意的，你几乎可以将它们命名为任何的名字。比如上面的三个段落，我们把第一段的类名命名为：first，代码就要这样写，

.first {color:red;}

但为了规范我们最好使用有意义容易理解的名字，让名称尽可能与表现方式无关。书写上一般采用驼峰式大小写，即多个单词的情况下，首单词无大写字母，其后单词首字母大写，如topNav,leftSidebar。

3.ID和类的使用

我们在CSS中定义了类或ID，那么我们怎么把它应用到Html中呢？

<P class="first">第一个段落</P>

若当初我们定义的是ID，#first {color:red;}。那么现在我们应该这样写：

<P id="first">第一个段落</P>

这样应用了之后，只有第一个段落的颜色为红色，其它段落便不受First类影响。

4.ID和类的区别

看了上面的几个例子之后，你可能会觉得ID和类除了书写上的区别之外，功能上好像没有区别。的确，它们在功能上也没有区别，它们的区别就是ID在页面上必须是唯一的。而类可以被任意使用。例如我们定义一个ID，一个类。

#first {color:red;}

.second {color:green;}

first因为前面有个#号所以属于ID，Second则属于类。则：

<P id="first">段落一</P>
<P class="second">段落二</P>
<P class="second">段落三</P>

上面的代码中“Second”这个类被使用了两次，说明类可以被多次使用，但ID在页面中只能被使用一次。

我们一般用ID来标识持久的结构性元素。使用更多的是类。

5.防止类的滥用

类是非常灵活和强大的，正因如此，它也极易被过度的使用。在实际中我们应尽可能少的使用类。大多数时候我们所创建的文档中只需要添加几个类。