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

Question

对于一个白人来说，我很困惑。我正在尝试做两件事。

更改 link、a:link、a:visited、a:hover
将 header（网格）中的所有项目居中

.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;
}

link是：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; }

这将至少使您的特异性与当前选择器的特异性相匹配 'winning'。

假设您的样式在其他样式之后被调用，这应该可行。

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

navbar links color - center in grid

html

css

css-grid