在 CSS 中更改显示属性的措辞内容

Question

在<button> specification part we see that permitted content is only Phrasing content. It's valid HTML code part (checked here):

<button>
    <span></span>
</button>

这是无效的 HTML 代码部分（已检查 here）：

<button>
    <div></div>
</button>

Error: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)

但是我们可以改变display属性的<span>:

<button>
    <span style="display: block"></span>
</button>

看起来我们使用 <div> 而不是 <span>，但 HTML 是有效的。是否可以（根据规范）使用允许的内容元素并更改其 display 属性?

Answer 1

即使您使用 display: block 设计了一个 span，您仍然不能将 block-level 元素放入其中：

<div><p>correct</p></div>
<span style="display: block;"><p>wrong</p></span>

无论 CSS 如何改变，(X)HTML 仍然必须遵守 (X)HTML DTD（无论您使用哪个）。

所以它们是不同的，因此这里没有问题。

Answer 2

但是在HTML5中，一些块元素可能被放在inline里面！我们说将块元素放在 link 中，在其他情况下它没有意义。 “Block-level” links in HTML5

Phrasing content with changed display property in CSS