导航栏链接颜色 - 网格中心

Question

我很困惑，因为白色。我想做两件事。

1. 更改链接的颜色a:link，a:visited，a:hover
2. 将标题（网格）中的所有项目居中

.container {
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

.header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid #DAC896;
  text-align: center;
  background-color: #333;
}

.header > div {
  color: white;
  font-size: 4vw;
  padding: 0;
  align-items: center;
  text-align: center;
}

.logo,
.navbar,
.buttons {
  grid-row: 1;
}

.logo {
  grid-column: 1 / 3;
}

.navbar {
  grid-column: 2 / 3;
}

.buttons {
  grid-column: 3 / 3;
}

.navbar {
  background-color: #333;
  border: none;
}

.navbar > li > a {
  text-align: center;
}

.navbar-nav a:link {
  color: white;
  text-decoration: none;
}

.navbar-nav a:visited {
  color: white;
  text-decoration: none;
}

.navbar-nav a:hover {
  color: white;
  background-color: #111;
}

链接是：Corinth Shop

Answer 1

您的链接不是白色的，因为现有的选择器优先。您没有将链接视为白色的原因是因为CSS的第一行更具体。 CSS选择器具有特异性层次结构，因此更具体的选择器优先，而不考虑选择器在CSS文件中的顺序。

让我们比较两个选择器;

覆盖自己CSS的那个

.navbar-default .navbar-nav > li > a

你自己的CSS

.navbar-nav a:link { color: white; text-decoration: none; }

将您的CSS更改为;

.navbar-default .navbar-nav > li > a { color: white; text-decoration: none; }

这将至少使您与当前“赢得”的选择器的特异性匹配。

这应该有效，假设您的样式在其他样式之后被称为 。