为什么我的 UL 背景色没有覆盖 LI 元素？

Question

在我的 <ul> 上设置背景时，background-color 没有覆盖它的 <li> 子元素（它们的 background 没有改变）。如果我也为 <a> 设置 background，该元素的 background 会发生变化，但会出现一条细下划线：https://codepen.io/Boryamba/pen/XWJpzvE

我希望 <li> 元素与我的顶级菜单具有相同的 background-color。

我做错了什么？

* {
    padding         : 0;
    margin          : 0;
    box-sizing      : border-box;
    background-color: #546a76;
}
.page-content {
    display: grid;
    grid-template-rows: 8fr 8fr 1fr;
}
.top-header {
    display: grid;
    grid-template-rows: .5fr 7fr;
    height: 100vh;
}
.top-menu-list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 1rem;
    justify-content: flex-end;
    background-color: #37454d;
}
.top-menu-list a {
    text-decoration: none;
    font-size: 150%;
}

<body class="page-content">
    <header class="top-header">
        <nav class="top-menu">
            <ul class="top-menu-list">
                <li><a href="#about">Lorem</a></li>
                <li><a href="#services">Lorem</a></li>
                <li><a href="#contacts">Lorem</a></li>
            </ul>
        </nav>
    </header>
</body>

Answer 1

您正在将背景颜色设置为 * 元素，该元素将该背景颜色应用到页面上的每个元素。因此，即使您将不同的背景颜色应用于 ul 元素，li 的背景颜色仍将等于您在 * 元素中设置的背景颜色。从 * 中删除背景颜色，并在需要时将其应用到其他地方。

Answer 2

您不应在星号 * 通用选择器上使用 background-color。它将为每个尚未设置背景颜色的元素设置背景颜色。

要达到预期效果，请改为设置 .page-content 正文元素的背景颜色。

* {
    padding         : 0;
    margin          : 0;
    box-sizing      : border-box;
}

.page-content {
    display: grid;
    grid-template-rows: 8fr 8fr 1fr;
    background-color: #546a76;
}

.top-header {
    display: grid;
    grid-template-rows: .5fr 7fr;
    height: 100vh;
}

.top-menu-list {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 1rem;
    justify-content: flex-end;
    background-color: #37454d;
}

.top-menu-list a {
    text-decoration: none;
    font-size: 150%;

}

<body class="page-content">
    <header class="top-header">
        <nav class="top-menu">
            <ul class="top-menu-list">
                <li><a href="#about">Lorem</a></li>
                <li><a href="#services">Lorem</a></li>
                <li><a href="#contacts">Lorem</a></li>
            </ul>
        </nav>
    </header>
</body>

为什么我的 UL 背景色没有覆盖 LI 元素？

Why doesn't my UL background-color cover LI elements?

html

css

menu

background-color