цвет ссылок navbar - центр сетки

Question

Я так растерялся, был в этом из-за белого.Я пытаюсь сделать 2 вещи.

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

Ссылка: Коринф Магазин

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

После этого, по крайней мере, ваша специфика будет совпадать со спецификой селектора, который в данный момент «выигрывает».

Это должно сработать, предполагая, что ваши стили называются после других стилей.