使用CSS更改span背景颜色没有效果答案

【问题标题】：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 上的<span> 规范 - 允许的内容：短语内容，不能包含标题，即<h1>，因为它不是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结构。
在这种情况下，<span> 毫无意义，可以删除。如果你真的想要，只需将类放在 h1 本身上：<h1 class="grey_bg"> 并使用 .grey_bg { } 设置样式。