我可以将按钮嵌套在另一个按钮中吗？

Question

这是试图使我的 html 语义尽可能正确而导致的问题。

我有一个父按钮，它在同一页面中执行两个功能，并充当嵌套锚点（重定向到另一个页面）的大容器的父标签，以及一个 div 标签，它也充当另一个按钮的父标签那是假设执行一些操作。

 <button>
  <div id="the-most-big-container"
    <a href="http://www.RedirectMeToAnotherPage.com"></a>
   <div>
     <button> do some action </button>
   </div>
  </div>
</button>

我尝试嵌套按钮，给它一个类和 id，我应用到类和 id 的所有属性都没有在子按钮上执行，而且子按钮完全脱离大容器并将自己放置在DOM就像是一个完全独立的标签，不被任何其他标签嵌套。

[更新]

显然，禁止将一个按钮嵌套在另一个按钮中，但我还想解释为什么嵌套按钮的行为不响应 css 样式，以及它现在如何准确地放置自己关于 DOM，它现在是一个完全独立的自己标记还是什么？

此外，现在我将被迫将父按钮标签更改为任何其他标签，以便我可以在其中嵌套子按钮。我想要一个关于父按钮标签的替代标签的建议，例如：我可以将父按钮更改为 div 标签，

但我需要一个在语义上更具描述性的标签（不仅仅是一个 div），我首先将那个父按钮用作切换按钮，这样当我单击它时它会显示和隐藏最大 -容器分区

原文由 AndrewMk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 <button> 放在 <button> 元素中 是无效 的。

在按钮元素的 W3C 推荐中，您可以阅读：

内容模型：

措辞内容，但不得有 交互式内容后代。

[ 来源： w3.org （强调我的） ]

互动内容 包括：

• 一种
• 音频（如果存在控件属性）
• 按钮
• 嵌入
• 框架
• img（如果存在 usemap 属性）
• 输入（如果类型属性不处于隐藏状态）
• 注册机
• 标签
• 对象（如果存在 usemap 属性）
• 选择
• 文本区域
• 视频（如果存在控件属性）

原文由 web-tiki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 CSS，我们可以将其样式设置为看起来像按钮内的按钮：

 .buttons-wrapper {
  position: relative;
}

.seemingly-outer-button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  width: 100%;
  background: black;
  color: lightblue;
}

.seemingly-inner-button {
  position: absolute;
  top: 8px;
  bottom: 8px;
  height: 24px;
  left: 20px;
  color: lightcyan;
  background: brown;
}

 <div>
  <h4>Try clicking these buttons:</h4>
  <div class="buttons-wrapper">
    <button class="seemingly-outer-button" id="outer" onclick="alert('outer')">
          The Seemingly Outer Button
        </button>
    <button class="seemingly-inner-button" id="inner" onclick="alert('inner')">
          The Inner Button
        </button>
  </div>
</div>

StackBlitz 上的 React 示例。

原文由 Aakash 发布，翻译遵循 CC BY-SA 4.0 许可协议