php input onclick,html中onClick HTML事件不能被触发

本着最小化修改题主代码的原则，提出2点修改建议：

1、鼠标停留在“大字体”“小字体”并没有CSS样式中的hand

cursor:pointer;/*似乎没有hand 这个值，一直用的是pointer，可能以前有过 hand 这个值*/

MDN 上的解释：

2、单击“大字体”“小字体”都无反应。

.afont span{font-size:20px; color:blue;}

.bfont span{font-size:16px; color:green;}

.afont，.bfont 后面了加了一个标签名，让权重和上面相等，这样同等权重下后面才能覆盖前面的。能明白？

解释：css 样式重复时，覆盖至少有三条原则，

1、权重高的覆盖权重低的

权重本身有好几个等级，大概是：ID选择器最高(如#contentfram)，class 选择器其次(如.mainfram)，标签选择器再其次(如span)，继承样式没有权重(自身没有设定样式，但是因为父元素设置了，所以继承了)。

所以原来代码.mainfram span 权重 > .afont；导致 .afont 的样式虽然在后面也不会覆盖前面的，因为权重低。如果改成 .bfont span ，二者权重相等，结合就近原则，后面的就覆盖了前面的样式；

2、就近原则：后面的覆盖前面的，离 html 近的覆盖离 html 远的

3、!important,这个一般不用，详情自行了解；

建议：如果初学 html ，不建议太关注 css 样式，因为 css 也是很繁杂的一部分，如果再和 js 一起学的话，估计会受挫不少，可以尝试，先学 html，学到觉得可以了，单独攻 css，再攻 js，一起学容易错，并且没有精力去全部搞清楚，特别是 css 和 js 单独拎出来东西很多，一句两句讲不清楚，容易让人丧失信心；

css 权重如果不太理解，可以参考CSS权威指南-中-第3版，js 放在 html 中的用法很少，属于历史遗留，大概了解就行了，一般都不这么写，所以你会发现很多答主怀疑你的 js 代码有问题，实际上不是的。