Question

我已将background-color: #C0C0C0;应用于我的span元素.grey_bg，但背景并未改变颜色。那是为什么？

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

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

Answer 1

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

＆＃13;

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

＆＃13;

<div class="grey_bg"> 
    <h1>Hey</h1>
</div>

＆＃13;

...或制作跨度块级别：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先你的标记不正确。您不能在内联元素h3中包含块元素span。

但是如果你想保留那个标记，你必须使容器元素表现为block。所以把它作为：

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

Answer 3

我发现我必须在css中定位h1：

.grey_bg h1 {
    background: #C0C0C0;
}

Answer 4

您的代码不正确，因为span正在包裹您的H代码。

您不应该使用span来封送inline元素，例如H代码。相反，您希望跨度位于H标记内。

span元素是内联级通用容器。它还有助于通知文档结构，但它用于分组或包装其他内联元素和/或文本，而不是块级元素。两种不同类型之间的界线起初可能看起来相当随意。要记住的区别在于内容的类型，以及在没有任何样式的情况下写下来的内容。 div围绕一组块级元素放置 - 例如，包装标题和链接列表以创建导航菜单。 span包装了一组内联元素或（最常见的）纯文本。关键词是“group”：如果div只包含一个块级元素，或者只包含一个内联元素，则会不必要地使用它。例如，在以下简单标记中查看div和span元素的使用方式：

W3C

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

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

使用CSS更改跨度背景颜色无效

4 个答案: