Question

在我的<ul>上设置背景时，background-color不会覆盖其<li>子元素（它们的background不会改变）。如果我也为background设置了<a>，则该元素的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元素？

2 个答案: