【问题标题】:which tag got priority between div and span tag in html?哪个标签在 html 中的 div 和 span 标签之间具有优先权?
【发布时间】:2015-01-19 06:46:06
【问题描述】:

这个问题可能是一个迭代!但是,我仍然对我找到的解释不满意。

我的问题是:如果我使用 span 标签而不是 div 标签会有什么后果?两者都是非语义标签,我知道。通常,我们使用 div 作为容器并使用 span 进行内联标记。如果我只使用 span 标签作为容器呢?

这两个标签的 CSS 是否有任何优先级?我只是想更清楚一点。

【问题讨论】:

  • CSS优先级没有区别。
  • 谁告诉你它们是非语义的?它们都有自己的部分和应该包含的不同类型的元素(块与内联的差异)。
  • @Itay — 它们的全部意义在于它们没有任何语义(以及最低限度的默认表示)。它们适用于当 HTML 没有任何具有正确语义的内容来描述您想要描述的内容时使用。
  • @Quentin 你所说的和称它们为非语义之间还有很大的差距

标签: javascript html css


【解决方案1】:

如果我使用 span 标签而不是 div 标签会有什么后果?

  • 默认应用不同的 CSS(display: inline 而不是 display: block 是主要(也可能是唯一)区别)。
  • 您的 HTML 可能会变得无效(取决于您放置元素的位置以及放入其中的内容)。

通常,我们使用 div 作为容器并使用 span 进行内联标记。如果我只使用 span 标签作为容器呢?

这取决于你试图让它包含什么。文本?链接?引用?一堆别的东西?没关系。分区?段落?桌子?一堆不同的东西?无效的 HTML,当浏览器尝试从中生成 DOM 时,您可能会遇到意外行为。

这两个标签的 CSS 是否有任何优先级?

没有。选择器特异性只关心您使用类型选择器(或其他类型的选择器),而不关心元素是什么特定类型。

请参阅the cascade,了解有关 CSS 如何确定哪些规则适用于元素的更多详细信息。

【讨论】:

    【解决方案2】:

    <div><span> 之间的主要区别在于浏览器默认情况下如何呈现它们(这可以通过 CSS 进行更改)。前者占用 100% 的可用宽度并导致换行,而后者则试图将内容压缩到允许的最小区域。

    这是一张图片供参考: 就像@amadan 所说,CSS 优先级没有区别。

    【讨论】:

    • 这不是真的。这只是默认的表示(可以用 CSS 改变)。真正的区别在于它们可以是哪些元素的子元素以及它们可以包含哪些元素。
    • @Quentin 是的,我指的是默认行为。我将编辑我的答案以包含它。
    猜你喜欢
    • 2013-05-30
    • 2012-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-09
    • 1970-01-01
    • 2011-04-17
    相关资源
    最近更新 更多