为何出现‘未知类型选择器button1’报错？自定义标签CSS适配求助

你的核心问题是用了自定义的<button1>标签——这不是HTML的标准元素，浏览器不会把它识别为按钮进行渲染，不仅样式会出现异常，也没有原生按钮的交互行为（比如点击反馈、表单提交能力等）。

修正方案一：改用标准<button>标签（推荐） #

直接替换成HTML原生<button>标签，这是最稳妥的做法，原生标签自带成熟的交互性和兼容性。只需要把CSS选择器对应调整即可：

修正后的HTML：

<button id="coolbutton" type="button">
  My JSFiddle Account
</button>

修正后的CSS：

#coolbutton {
  font-family: Verdana;
  color: purple;
  background-color: grey;
  text-align: center;
  text-decoration-line: overline underline;
  /* 补充样式让按钮更符合原生交互体验 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

html, body {
  background-color: #666699;
  margin: 0;
  padding: 20px; /* 避免按钮贴边 */
}

修正方案二：执意使用自定义标签（不推荐） #

如果一定要用<button1>，需要先将它设置为块级元素（否则text-align:center这类样式无法生效），同时补充基础交互样式：

<button1 id="coolbutton" type="button">
  My JSFiddle Account
</button1>

button1 {
  display: block; /* 转为块级元素，让对齐样式生效 */
  font-family: Verdana;
  color: purple;
  background-color: grey;
  text-align: center;
  text-decoration-line: overline underline;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
}

html, body {
  background-color: #666699;
  margin: 0;
  padding: 20px;
}

别纠结，只是习惯了C++/JS的自定义语法，忽略了HTML标签必须遵循标准规范而已，很常见的小坑。

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