现在我们想要调试这个标题的层级关系。试着使用如下的 CSS 作用于所有的元素。
这样我们所有的元素都会添加一个边框。可以方便的看到不同元素的位置关系。
我们再对这个样式进行改进，添加 color 和 background，并且使用 !important 来修饰（我们只在 debug 的时候用到该样式，!important 是个不错的选择，来大大减少样式冲突的可能）。
修改后的标题样式如上所示。给所有元素的 color 和 background 设置一个半透明的蓝色使得 debug 界面更加清晰，而且使用半透明的颜色有一个好处是多级嵌套的地方颜色会变深（更白或更蓝）这样我们可以知道更多的细节。
我们还可以更具自己的情况对这个 debug 样式做调整，比如标题中现在用了阴影，对视觉上有一定的影响我们可以强制去掉，还有不希望显示矢量图，最终我们获得如下的样式：
新建keyframes元素，命名为myFirst。设置百分比，编写Animation属性对属性值的引用。为了开考虑兼容性问题，可以多写几个备选，详细步骤：
1、首先，准备好HTML前期工作以及对DIV的一个简单设置。
2、然后，新建keyframes元素，命名为myFirst。
3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。
4、这时候，可以为他写上各种百分比的颜色。
5、此时，就能编写Animation属性对属性值的引用。
6、为了开考虑兼容性问题，可以多写几个备选。
1.我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具；
2.打开的调试工具如下图所示：
3.我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素；
4.看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了；
5.我去掉一些样式之后，就出现了下面的效果，看截图；
