用於樣式的通用內聯和塊級 HTML 元素

Question

是否有一個 HTML 元素可以用來包裝其他內容，以便在不影響布局的情況下設置樣式（例如設置背景顏色），而無需事先知道內容是否內聯？

例如考慮這個 HTML：

<p>This is a paragraph with some text in it</p>

<div>
  <p>Some text</p>
</div>

如果我想通過像這樣包裝Some text來使其變黃：

<p>This is a paragraph with <yellow>some text</yellow> in it</p>

<yellow>
<div>
  <p>Some text</p>
</div>
</yellow>

那我應該為<yellow>使用什么？

您可能會說“使用<div> ”，但即使使用display: inline也會破壞段落。

我能得到的最接近的是<span>和display: inline-block 。

 .yellow { background-color: yellow; display: inline-block; }

 <p>This is a paragraph with <span class="yellow">some text</span> in it</p> <span class="yellow"> <div> <p>Some text</p> </div> </span>

然而，這確實會影響布局（它將項目符號移動到底部）：

 .yellow { background-color: yellow; display: inline-block; }

 <div style="width: 100px"> <ul> <li><span class="yellow">some text blah blah blah</span></li> </ul> </div>

有沒有真正不影響布局的元素？

Answer 1

您可以將樣式元素默認設置為塊，並添加一個 css 聲明，當它是塊級元素的子元素時使其內聯。

 .yellow { background-color: yellow; display: block; } p >.yellow, li >.yellow { display: inline; }

 <p>This is a paragraph with <span class="yellow">some text</span> in it</p> <span class="yellow"> <div> <p>Some text</p> </div> </span> <div style="width: 100px"> <ul> <li><span class="yellow">some text blah blah blah</span></li> </ul> </div>

我提出的另一個建議是使用mark標簽而不是span ，因為它在語義上更適合突出顯示（如果這是您的實際用例的話）。

Answer 2

雖然這是不好的做法，但您可以在 CSS 中創建自定義標簽來應用這些 styles。 CSS 用於標簽：

tagname {
styles go here
}

然后使用 HTML 中的標簽：

<tagname>hello</tagname>

不要添加 # 或 a。 在 CSS 中的名稱前面。 在 HTML 中，這些 styles 將應用於標簽之間的所有內容。