当我添加 link 时，sidenav 的背景颜色会发生变化

Question

当我将 link 添加到我的 sidenav 时，它会从 sidenav 的背景颜色更改为围绕 link 的方框形状的主要背景颜色。

我想去掉空格后面的灰色，改用 sidenav 背景色（有点黑）。

我的 HTML 文件：

<body>
  <div class="sidenav">
    <h2>Spaces:</h2>
    {% for space in spaces %}
    
    <a href="/{{space}}">{{space}}</a>

    {% endfor %}
  </div>
</body>

我的 CSS 文件：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #24252A;
}
.sidenav{
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
    color: #818181;
}

.sidenav a{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
}

.sidenav a:hover{
    color: #f1f1f1;
}

任何帮助将不胜感激，谢谢！

Answer 1

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #24252A;
 }

因此，您使用 * 来放置 background-color，这是一个全局选择器，这就是为什么所有元素 background-color 都更改为 #24252A，但 .sidenav 除外元素有不同的背景颜色定义。

解决方案应该是从 *（全局选择器）中删除 background-color，并将其设置为 body。

像这样：

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background-color: #24252A;
}

通常将 background-color 放在全局选择器中是一种不好的做法。希望回答问题。

Answer 2

只需从 .sidnav 中删除背景颜色并在 .sidnav a

上添加你想要的任何背景颜色

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252A;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;


  **background-color: #111; "REMOVE"**


  overflow-x: hidden;
  padding-top: 20px;
  color: #818181;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;


  **ADD A BACKGROUND-COLOR**


  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

当我添加 link 时，sidenav 的背景颜色会发生变化

Background color of sidenav changes when I add a link

html

css

bootstrap-4