html按钮click事件无效,html中onClickHTML事件不能被触发

本着最小化修改题主代码的原则&＃xff0c;提出2点修改建议&＃xff1a;

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

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

MDN 上的解释&＃xff1a;

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

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

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

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

解释&＃xff1a;css 样式重复时&＃xff0c;覆盖至少有三条原则&＃xff0c;

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

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

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

2、就近原则&＃xff1a;后面的覆盖前面的&＃xff0c;离 html 近的覆盖离 html 远的

3、!important,这个一般不用&＃xff0c;详情自行了解&＃xff1b;

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

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