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

Question

我已将 background-color: #C0C0C0; 应用到我的 span 元素 .grey_bg 但背景没有改变颜色。这是为什么？

    .grey_bg {

      width: 100%;

      background-color: #C0C0C0;

    }

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

Answer 1

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

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

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

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

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

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