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

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

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

一、项目说明

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

二、项目效果图展示

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

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

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

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

《砸金蛋》页面从结构上看，比较简单，可以使用最简单的表格布局。在4行4列的表格的每个单元格中显示金蛋的具体效果图。也就是在html的body标签中使用

表格标签，在表格中有4个tr标签，每个tr标签中分别有4个td标签。代码如下。

四、调整《砸金蛋》页面

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

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

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

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

由图中可以看出，除了砸金蛋的标题之外，页面中还出现了一个袖珍的表格。为什么袖珍一点，原因是表格中的单元格td没有指定width宽和height高。现在需要指定宽和高，问题来了，那么多的td，一个标签一个标签地添加width和height属性，这才16个单元格，如果是若干，工作量相当大。CSS技术就解决了这样的烦恼，因为都是td标签，所以可以把td标签提取出来，在和之间加入

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

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

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

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

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

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

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

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

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

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

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

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

代码中在

使用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专题项目中会主要介绍，这里说明一下实现方法，发生点击的是标签，就是在标签中加入onclick属性，属性值就是指定一下该单元格最新的样式名，注意这个“该”字，“该”就是当下，就是被点击的这个单元格，在前端中用“this”这个关键字代表“该”，代表“当下”，代表“当前”。这样在点击后发生的属性值语句就是。

this.className=“jinhua”

语句中的className表示的就是class类选择器的名字，后面的“jinhua”是我们在

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

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

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

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

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

如果把代码中的class选择器换成id选择器，也就是在

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

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

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

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

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

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

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

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