使用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

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

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

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

...或者也可以制作跨度块级别:

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

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