上一章认识了两个空白标签,感觉十分有用。不过真要动手写的话,你就会发现问题。我们只学了用标签名字选择器,虽然可以一个页面中的链接,全都是一个样式。那是因为这个标签表示一个固定的意思,一般来说,也都具有相同的样式,这样看起来比较统一。但是到了前面两个标签,它没有具体的意义,可能被用在各种地方,如果我们还使用标签名作为选择器,就会感觉非常的笨拙,很难达到自己预期的效果。

这时候就会有一个想法:这圈(juan)里一群小猪崽,长得差不多,跑的还挺快,怎么也分不清,不如给它们身上写上编号吧~

不只你是这么想的,其实很多地方就是这么做的。大家都是好孩子,可能不太了解,在高中的时候,犯了错误被逮到,老师是不会问你的姓名的。因为学校里面可能有重名的,而且名字具体是哪个字,推敲起来也挺麻烦。他们上来就问:“你学号多少?”这是非常科学的,因为每个学号,在这个学校里只对应一个人。而且就算你说话口齿很不清楚,这么几位数字也很好辨别,而且也方便记下来。想想都非常可怕……(总觉得暴露了些什么,咳咳

那么每个学号(id),只会对应一个人,不会有重复。大家好像明白了什么,于是有:

<div id="miao"></div>

然后在 CSS 里面,我们用 # 号来表示 id:

#miao {
  color: red;
}

这样我们就可以对元素进行区分了。但是这样完美吗?在学校里,需要分配一些任务的时候,可能会说:一班二班三班负责挖坑,四班五班六班负责植树。很好,一下六个班都被分配了任务。如果你使用学号挨个叫人的话……

那么我们需要一种方式,来称呼一类元素,这就是 class,我们叫做“类”。你可能说我们初中学英文的时候对它的解释是班级中的“班”,那我们就按照这个来进行理解,这表示这个元素属于哪个班(算是哪一类,其实你怎么理解都可以,只要知道它的特性就好)。

一个班里面有多少学生呢?其实有多少个都可以,一般是有好多个,但如果某些兴趣班报名的人很少呢,一个也可以,这就成了一对一授课了,要加钱的,2333

一个学生可以属于多少个班呢,也是不确定的。普通概念中好像只有一个班,如果学校中开展其他兴趣班,那么一个学生就可能同时加入多个班。

这时候就很有意思了,你看你和我都是三年二班的,可以说我们是一个班的,但是我上的数学兴趣班,你上的美术兴趣班。那美术兴趣班开课的时候,你去上课,没我什么事儿;反过来也是一样。

这些类比到 class 上也是一样的。可以多个元素被设置为相同的类,一个元素也可以被设置多个类。

<div class="hengji"></div>

我们在 CSS 中,用 . 来表示类

.miao {
  color: red;
}

所以其实我们就是给元素增加了两个属性,然后通过这两个属性的值对元素进行选择。

id 最大的特点就是精确,每个 id 只能对应一个元素,当然一个元素允许有多个 id (一般也没啥必要)。所以我们通常把它用在页面中必然唯一的元素上,比如每页的页头页尾等。

class 用来标记一类元素,然后对他们进行共同操作。既然是一类,那么数量随意;而一个元素也可以同时属于多个类。我们会在页面中可能出现许多次的元素上使用它,比如说商品列表中每一个商品的名称。

初学者最容易理解其中一个之后就只用这一个。但是稍微想想就知道这样效果并不好,只用 id 就难以批量操作;只用 class 又难以保证你选择的范围没有重复。

【本章助记卡片:卡片 for 第四十七章