前端基础：通过《砸金蛋》小游戏实践CSS的id选择器和class选择器

CSS，全称Cascading Style Sheets，中文名称层叠样式表或者级联样式表。前端文件中采用CSS主要目的是把结构和样式进行分离，也就是HTML技术专门负责网页的结构，也就是哪个地方应该放文字，哪个地方应该放图片，哪个地方应该放表格等技术。一旦网页中的文字需要加颜色，网页中的图片需要加边框，网页中的表格需要表格线加粗等技术时则使用CSS技术进行美化。就相当于买了一个房，最开始交到手里的都是毛坏房，房间的大致结构出来了，至于地面是用地板砖还是地毯，房屋顶棚是原装还是吊棚，房间的灯饰用什么样的绚烂效果，这些都属于对毛坏房基础上的装修，装修就是美化，就是CSS。

一、项目说明

该项目是实践CSS基本选择器Id选择器和class选择器的简单游戏案列，主要目的是掌握CSS语法的应用及id选择器或class选择器的使用场合。

二、项目效果图展示

一般对CSS样式使用之前，也需要使用HTML技术对页面进行布局，只有先实现了页面，才能更好的修饰页面中的元素，不过，针对于《砸金蛋》这样的页面，不需要详细地布局，布局还是比较简单的，就是几行几列的金蛋图排列。这里会有一些动效的添加。

效果图点击前如下图所示。

效果图点击后如下图所示。

三、搭建《砸金蛋》页面的基本结构

《砸金蛋》页面从结构上看，比较简单，可以使用最简单的表格布局。在4行4列的表格的每个单元格中显示金蛋的具体效果图。也就是在html的body标签中使用<table>表格标签，在<tabl>表格中有4个tr标签，每个tr标签中分别有4个td标签。代码如下。

<html><head><title>砸金蛋</title></head><body><table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

四、调整《砸金蛋》页面

《砸金蛋》页面基本表格页面已经搭建成功，问题是浏览器中显示内容后的效果如下图所示。

可以看到除了title标题以外，页面什么都没有显示。

第一是因为table中什么都没有，第二是因为table没有表格线。将代码做修改，也就是table标签中加入表格线。代码如下。

<html><head><title>砸金蛋</title></head><body><table border=1><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

修改后的代码在浏览器中显示如下。

由图中可以看出，除了砸金蛋的标题之外，页面中还出现了一个袖珍的表格。为什么袖珍一点，原因是表格中的单元格td没有指定width宽和height高。现在需要指定宽和高，问题来了，那么多的td，一个标签一个标签地添加width和height属性，这才16个单元格，如果是若干，工作量相当大。CSS技术就解决了这样的烦恼，因为都是td标签，所以可以把td标签提取出来，在和之间加入<style>标签，在style标签中写td标签名称，后面直接跟上“{}”，在“{}”写入width和height属性，并设置相应的像素值，注意，值后面一定要有“px”，“px”表示像素值的意思。在属性名和值之间用“：”进行隔开。td的css格式代码如下所示：

td{width:200px;height:150px;
}

这段代码是实现了所有的td标签都具备宽度为200px和高度为150px。

这样修改后的html代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;}</style></head><body><table border=1><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

代码在浏览器中的显示效果如下。

由图中可以看到表格中每个单元格的大小发生了变化，这种改变样式的方式手段是比较方便的，更有利于对页面的管理。

现在需要将表格中加入一个图像，也就是空蛋的图像，其实只需要在td标签的样式中加入背景图片的属性background，再把图片的名称值赋给这个属性，也是用“：”号隔开的。

这样对td样式修改的代码如下。

td{width:200px;height:150px;backgroud:url(jindan.gif)
}

注意background属性后面的属性值是一个图片，因此由url（统一资源定位符）指定其具体的地址，再把“jindan.gif”图片加入到url后面的括号中。

在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

这种把有共同样式的标签名称提取出来，用“{}”中指定属性的方法设置样式，其实叫标签选择器。

对于《砸金蛋》的界面使用标签选择器的整体代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}</style></head><body><table border=1><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

代码对应的浏览器显示效果图如下。

五、《砸金蛋》中个别被砸出金蛋的效果处理

前面通过td标签结合标签选择器已经完成了《砸金蛋》页面的布局效果，现在如果其中某一个td单元格被点击，就会出现比较特殊的单元格，因为这个单元格背景的图片变成了另外一张图片，相当于在html页面中有若干个td，某一个td 的样式与其他td 不一样，如果使用CSS的标签选择器技术，就会出现所有的td都是一个效果，用html其它的标签也是一样的。例如html中所有的段落p提取出来的标签选择器，则所有的p标签都是标签选择在器后面设置的样式效果。在这些共有的效果中有一个独特的效果，也就是其中一个td与其它的td不一样，可以为这个独特的td标签起一个class的名字，这个class有“物以类聚”中类的意思，我们起这么一个“类”的名字，其目的就是从td标签中找出一类不相同的元素，有着独特的效果，比如这个类名叫class=“a”，这个名字“a”起的有点大众化了一点，不过代表独特的一类，然后在<head>和的中间<style>声明样式的地方添加上自定义的类名称“.a”，注意名称中有一个“.”（圆点），这是自己定义的类名的标记，后面的“a”就是class=“a”这句类名语句决定的。然后在后面跟上“{}”，写明具体的样式。如下面的格式语句。

.a{background:url(“jinhua.gif”）;
}

这段格式语句表明凡是具备“a”这样的class类的标签，都会有背景是“jinhua.gif”的设置。

这样，就可以在众多相同的td格式中定义一个不同类型的td效果。整体代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}.a{width:200px;height:150px;background:url("jinhua.gif");}</style></head><body><table border=1><tr><td class="a"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

代码中在<style>中定义一个“.a”的类名，在html代码中，第一个td标签使用class=“a”则使用了这个类名。在“.a”的类名后定义的样式有宽和高，是与td标签定义的宽和高是一致的，除了宽和高以外，还有背景图backgroud，用一张有金花的图片名称“jinhua.gif”,这张图片是不同于td标签选择器的金蛋图片的，这张图片是被砸开后的金蛋图片，具体效果如下。

这种以一种独立于文档元素的方式来指定样式的选择器叫类别选择器，类别选择器可以单独使用，也可以与其他元素结合使用。

这种选择器的作用就是在众多相同特征的元素标签中打造出独特的主角来。

当然，class=“a”写起来也是蛮麻烦的，至少字母很多，这里可以用id来取代class，也就是把class=“a”写成id=“a”，同时也要把<style>标签定义中的“.a”定义成“#a”，这种用id引用，用“#”号定义的选择器叫做id选择器。

我们把前面第一个单元格显示金花图片的代码用id选择器改写，代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}#a{width:200px;height:150px;background:url("jinhua.gif");}</style></head><body><table border=1><tr><td id="a"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

使用id选择器后的代码在浏览器中显示的效果图如下。

由图中可以看到，使用class选择器和使用id选择器效果是一样的，那为什么还要有class选择器和id选择器两种呢?其实两者还是有一定的区别的。html中这样做了一些规定。

id相当于人的身份证，不可以重复
class相当于人的名称可以重复
一个html标签只能绑定一个id名称
一个html标签可以绑定多个class名称

这样就能分清class选择器和id选择器到底在什么情况下使用比较好。

在定义声明方面：

id选择器是以#开头。
class选择器是以.开头。

在使用选择器方面:

id选择器利用语句id=“选择器名称”来使用。
class选择器利用语句class=“选择器名称”来使用。

有了class选择器和id选择器，我们就有了改变td中图片的方法，砸金蛋的实质思想就是点击某一个金蛋时，变换被点击单元格的图片，或者变成金花四浅的图片，或者变成一堆碎片的图片。如果使用class选择器，就需要定义两个class选择器，一个class选择器中定义金花四浅的图片，另一个class选择器定义一堆碎片的图片。如果使用id选择器，就需要定义两个id选择器，一个id选择器中定义金花四浅的图片，另一个id选择器定义一堆碎片的图片。

定义class选择器语句的代码如下。

 .jinhua{background-image:url("jinhua.gif");width:200px;height:150px;}
.kongdan{background-image:url("kongdan.gif");width:200px;height:150px;}

定义id选择器语句的代码如下。

#jinhua{background-image:url("jinhua.gif");width:200px;height:150px;}
#kongdan{background-image:url("kongdan.gif");width:200px;height:150px;}

六、《砸金蛋》中点击后金蛋效果的改变

《砸金蛋》界面准备就绪，“砸出金花”与“砸出空蛋”的图片也准备就绪，下面要做的事情就是把这个“砸出金花”和“砸出空蛋”的效果通过点击的过程来实现。“点击”事件在后面的js专题项目中会主要介绍，这里说明一下实现方法，发生点击的是<td>标签，就是在<td>标签中加入onclick属性，属性值就是指定一下该单元格最新的样式名，注意这个“该”字，“该”就是当下，就是被点击的这个单元格，在前端中用“this”这个关键字代表“该”，代表“当下”，代表“当前”。这样在点击后发生的属性值语句就是。

this.className=“jinhua”

语句中的className表示的就是class类选择器的名字，后面的“jinhua”是我们在<style>中预先定义好的class名称。把这条语句加到td点击方法中的完整代码是：

<td onclick=“this.className=‘jinhua’”>

注意，代码中有单引号有双引号，这里因为当一句代码中发生引号里面还有引号，那就外面一层用双引号，里面一层用单引号或者外面一层用单引号，里面一层用双引号，也就是双引号中套着单引号，单引号中套着双引号。绝不能把引号的嵌套关系弄混淆。

这样，第一个单元格被点击砸出金花的整体代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}.jinhua{width:200px;height:150px;background:url("jinhua.gif");}.kongdan{width:200px;height:150px;background:url("kongdan.gif");}</style></head><body><table border=1><tr><td onclick="this.className='jinhua'"></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

代码对应的浏览器显示效果图如下。

当效果图中第一颗金蛋被鼠标点击后，效果图如下所示。

接下来可以修改代码，在第二个td单元格上添加onclick点击事件，调用另外一个空蛋的类选择器。代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}.jinhua{width:200px;height:150px;background:url("jinhua.gif");}.kongdan{width:200px;height:150px;background:url("kongdan.gif");}</style></head><body><table border=1><tr><td onclick="this.className='jinhua'"></td><td onclick="this.className='kongdan'"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

上述代码对应的浏览器显示效果如下。

现在，鼠标在第一个td单元格和第二个td单元格中点击后的效果如下图所示。

如果把代码中的class选择器换成id选择器，也就是在<style>选择器声明中把“.”换成“#”，然后在点击后的内容把this.className=“jinhua”换成this.id=“jinhua”，注意，在onclick事件中引用class名称需要className，引用id直接使用id。如果作用到标签上，需要写class和id。这是不同的地方。

把class选择器修改成id选择器代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}#jinhua{width:200px;height:150px;background:url("jinhua.gif");}#kongdan{width:200px;height:150px;background:url("kongdan.gif");}</style></head><body><table border=1><tr><td onclick="this.id='jinhua'"></td><td onclick="this.id='kongdan'"></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table> </body>
</html>

上述代码在浏览器中的显示效果图如下。

现在，鼠标在第一个td单元格和第二个td单元格中点击后的效果如下图所示。

这样，不管用class选择器也好，用id选择器也好，做出的《砸金蛋》整体效果就需要在每个td上添加点击事件，不要嫌这一步骤麻烦，在后续说到js系列就可以通过js代码来为每个td添加点击事件了。当把每一个td添加上点击事件后，最终就会形成《砸金蛋》的整体效果。

七、《砸金蛋》整体效果代码

由上面的步骤演化，《砸金蛋》小游戏的整体效果代码如下。

<html><head><title>砸金蛋</title><style>td{width:200px;height:150px;background:url("jindan.gif");}.jinhua{width:200px;height:150px;background:url("jinhua.gif");}.kongdan{width:200px;height:150px;background:url("kongdan.gif");}</style></head><body><table border=1><tr><td onclick="this.className='jinhua'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='jinhua'"></td><td onclick="this.className='kongdan'"></td></tr><tr><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td></tr><tr><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td></tr><tr><td onclick="this.className='kongdan'"></td><td onclick="this.className='jinhua'"></td><td onclick="this.className='kongdan'"></td><td onclick="this.className='kongdan'"></td></tr></table> </body>
</html>

代码执行后的效果图如下所示。

图中所示的16个金蛋全部被点击之后的效果图如下所示。

代码的github地址：https://github.com/wawacode/smacheEgg