在css中设计导航栏部分的问题[关闭]答案

【问题标题】：Problem with designing navbar section in css [closed]在css中设计导航栏部分的问题[关闭]
【发布时间】：2022-11-01 12:07:02
【问题描述】：

enter image description herecss 文件中存在问题，以便为#navbar 部分着色。

我删除并再次编写代码，但找不到任何解决方案。我检查了该站点，但没有任何错误，我认为此问题与#VScode 扩展有关。

【问题讨论】：

除非您向我们展示您的代码，否则没有人可以帮助您。编辑您的问题并添加一个堆栈sn-p用你的 html 和你的 css。
嗨 Fidan，欢迎来到 Stack Overflow。如果您可以提供minimal reproducible example，它将帮助其他人回答您的问题
请不要使用代码图像，而是复制代码和format it as code。

标签： html css navbar background-color

【解决方案1】：

您是否尝试专门针对导航栏类？像这样：

.navbar{
background: pink;
}

【讨论】：

您说“#navbar”，这意味着 Id 导航栏并从您的代码中读取，导航栏用作“.navbar”，这意味着它是一个类，但是 idk，在没有看到实际 HTML 的情况下试图帮助您有点困难。

【解决方案2】：

我会直接选择导航栏：

.header {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  margin: 2rem 7%;
  border-radius: 30rem;
  box-shadow: 0px 0px 17px -2px rgba(0, 0, 0, 0.75);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar .a {
  margin: 0 1rem;
  font-size: 1.6rem;
  color: var(--black-color);
  border-bottom: 0.1rem solid transparent;
}

.navbar .a:hover {
  border-color: var(--main-color);
  padding-bottom: 0.5rem;
}

如果你想改变.navbar 的所有孩子的颜色，你可以添加一个重要的语句，如下所示：

.navbar .a {
  margin: 0 1rem;
  font-size: 1.6rem;
  color: var(--black-color) !important;
  border-bottom: 0.1rem solid transparent;
}

这会覆盖元素的任何其他颜色属性。

【讨论】：