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之外的其他东西），我首先将该父按钮用作切换按钮，这样当我点击它时它会显示并隐藏最多-Big容器-DIV。

Answer 1

将<button>放入<button>元素中

无效。
在按钮元素的WC3推荐中，您可以阅读：

内容模型：
短语内容，但必须没有互动内容后代。 [来源：w3.org]

Interactive content包括：

a
audio（如果存在controls属性）
按钮
embed
iframe
img（如果存在usemap属性）
输入（如果type属性不处于隐藏状态）
keygen
标签
object（如果存在usemap属性）
选择
textarea
视频（如果存在controls属性）

Answer 2

你不能这样做。按钮不包含其他元素。但是，您可以设置div元素的样式以获得按钮的外观和感觉，这是使用bootstrap的样子：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="btn btn-default">
        outer button
        <br />

        <button class="btn btn-primary">
            inner button
        </button>
    </div>
</body>
</html>

＆＃13;

我可以在另一个按钮内嵌入按钮吗？

2 个答案: