【问题标题】:Using CSS to change span background color has no effect使用CSS更改span背景颜色没有效果
【发布时间】:2015-09-11 06:36:33
【问题描述】:

我已将background-color: #C0C0C0; 应用于我的跨度元素.grey_bg,但背景没有改变颜色。这是为什么呢?

    .grey_bg {

      width: 100%;

      background-color: #C0C0C0;

    }
<span class="grey_bg">
        <h1>Hey</h1>
    </span>

【问题讨论】:

  • 阅读MDN 上的&lt;span&gt; 规范 - 允许的内容:短语内容,不能包含标题,即&lt;h1&gt;,因为它不是phrasing content

标签: html css background-color


【解决方案1】:

因为将块级 H1 元素放在 span(内联元素)中并不是真正有效的 HTML。您可以使用 div 代替 span

.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}
<div class="grey_bg"> 
    <h1>Hey</h1>
</div>

... 或者也将 span 设为块级:

span {display: block;}
.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}
<span class="grey_bg"> 
    <h1>Hey</h1>
</span>

【讨论】:

    【解决方案2】:

    首先您的标记不正确。内联元素 span 内不能有块元素 h3

    但如果您想保留该标记,则必须使容器元素的行为类似于block。所以把它写成:

    .grey_bg { 
    width: 100%; 
    background-color: #C0C0C0; 
    display:block;
    }
    

    【讨论】:

      【解决方案3】:

      您的代码不正确,因为您的 span 包装了您的 H 标记。

      你不应该使用span 来包装inline 元素,就像H 标签一样。相反,您希望跨度位于您的 H 标记内。

      span 元素是内联级别的通用容器。它还有助于通知文档的结构,但它用于分组或包装其他内联元素和/或文本,而不是块级元素。 起初,这两种不同类型之间的界限似乎相当随意。要记住的区别是内容的类型,以及在没有任何样式的情况下写下来时的显示方式。 div 被放置在一组块级元素周围——例如,包装一个标题和一个链接列表以制作导航菜单。跨度包含一组内联元素或(最常见的)纯文本。关键词是“组”:如果一个 div 只包含一个块级元素,或者一个 span 只包含一个内联元素,那么它的使用是不必要的。例如,查看 div 和 span 元素在以下简单标记中的使用方式:

      W3C

      .grey_bg {
        width: 100%;
        background-color: #C0C0C0;
      }
       &lt;h1&gt;&lt;span class="grey_bg"&gt;Hey&lt;/span&gt;&lt;/h1&gt;

      【讨论】:

        【解决方案4】:

        我发现我还必须在 css 中定位 h1:

        .grey_bg h1 {
            background: #C0C0C0;
        }
        

        【讨论】:

        • 问题不在于你的选择器的特殊性,而在于你的html结构。
        • 在这种情况下,&lt;span&gt; 毫无意义,可以删除。如果你真的想要,只需将类放在 h1 本身上:&lt;h1 class="grey_bg"&gt; 并使用 .grey_bg { } 设置样式。
        猜你喜欢
        • 2023-04-02
        • 1970-01-01
        • 2011-10-30
        • 2011-10-22
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-06-20
        • 1970-01-01
        相关资源
        最近更新 更多