创建不同样式独立按钮时手风琴button样式覆盖自定义样式如何解决

问题根源 #

1. 自定义样式未正确绑定到按钮：你给按钮设置的是type="addbutton"，而非class="addbutton"，导致你写的.addbutton类样式完全没有生效。
2. 手风琴样式优先级覆盖：手风琴使用标签选择器button + 伪元素button::after设置了全局按钮样式，即使你后续绑定了类名，也需要显式覆盖伪元素的样式才会生效。
3. 原有样式语法错误：CSS中数值和单位之间不能有空格，你写的1 px/40 px属于无效语法，浏览器不会识别。

修复步骤 #

1. 修正按钮属性
   把按钮的HTML代码修改为：

<button type="button" class="addbutton" id="btnInsert" onclick="onClick()">Add score!</button>

type属性设为标准值button，新增class属性绑定你写的自定义样式类。

2. 重写自定义按钮样式，覆盖全局冲突属性
   把你的样式部分替换为以下代码：

.addbutton {
    padding: 1px;
    height: 40px;
    width: auto; /* 可根据需求调整为固定值，比如120px，覆盖全局的500px宽度 */
    /* 以下属性可根据需求调整，覆盖全局设置 */
    cursor: pointer;
}
/* 显式清除手风琴添加的加号伪元素 */
.addbutton::after {
    content: none;
    float: none;
    margin: 0;
}

fieldset {
    margin-bottom: 20px;
    display: inline-block;
}

3. 可选：样式优先级提权
   如果Drupal本身还有其他全局按钮样式覆盖了你的设置，可以给选择器增加层级提高优先级，比如给你的自定义块外层加一个专属类名score-calculator-block，之后样式写成：

.score-calculator-block .addbutton {
  /* 你的样式 */
}
.score-calculator-block .addbutton::after {
  content: none;
}

其他代码优化建议 #

• 你使用的<h>标签属于非法标签，需要改为合法的标题标签，比如<h2>、<h3>
• JS代码中localStorage.removeItem("total",number)写法错误，removeItem只需要传第一个参数，多余的第二个参数可以删除

内容的提问来源于stack exchange，提问作者BoostMatch