CSS странное появление цвета в ссылке

Question

Я создаю несколько HTML страниц и хочу, чтобы навигационная ссылка на текущую страницу имела другой стиль, чем остальные ссылки. Однако мое текущее решение не дает желаемого результата.

Это мой код:

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li class="current"><a href="about.html">ABOUT</a></li>
</ul>

И CSS:

.current{
   color: #0078fe;
    font-weight: bold;
}

a:hover {
    color: white;
}

a:active {
    color: #0078fe;
}

Но это имеет следующие результаты:

Домашняя страница:

О программе:

Как оформить правильную ссылку на текущую страницу со стилем current без применения других ссылок?

Answer 1

Стили пользователя-агента (браузера) по умолчанию для самой ссылки (элемент a) перезаписывают ваши стили, потому что стили ссылок агента пользователя имеют более высокую специфичность к фактическому стилю, как ваш .current селектор выбирает элемент списка, который является родительским для ссылки и применяет только некоторые стили к своим дочерним элементам посредством наследования.

Если вы хотите, чтобы ссылка была выделена полужирным шрифтом только в состоянии active, то вам нужен селектор font-weight property changed on the active`, как я это делал в примерах ниже.

То, что вы хотите сделать, это дать класс самим ссылкам (элементам a) и присвоить им свойства. Может использовать имя класса, например .nav-link. Я предполагаю, что .current предназначено просто для того, чтобы быть на любой ссылке для текущей страницы. Например:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>

.nav-link {
   color: #0078fe;
}

.nav-link:hover {
   color: #fff;
}

.nav-link:active {
   color: #0078fe;
   font-weight: bold;
}

Если вы подразумевали .current как класс для ссылки текущей страницы, на которой находится пользователь, вы также можете использовать селектор :not(), чтобы сохранить hover и active заявляет о применении к «ссылке» для текущей страницы, к которой применен класс .current. Вот так:

.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
  font-weight: bold;
}

---

Несмотря на то, что сохранять селекторы простыми и просто применять класс ко всем a элементам, как указано выше, это лучшая практика, в качестве альтернативы вы можете продолжать иметь класс на каждом li элемент и затем используйте селектор комбинации потомков.

<ul>
    <li class="nav-link current"><a href="#">HOME</a></li>
    <li class="nav-link"><a href="about.html">ABOUT</a></li>
</ul>

.nav-link > a {
   color: #0078fe;
}

.nav-link > a:hover {
   color: #fff;
}

.nav-link > a:active {
  color: #0078fe;
  font-weight: bold;
}

---

? РЕДАКТИРОВАТЬ ?

Похоже, что вы на самом деле просите, чтобы стиль ссылки в навигации по-разному, когда вы находитесь на странице, ссылка для которой. Вы делаете это, применяя класс к ссылке на страницу, на которой вы находитесь, как я делал выше, используя класс .current. : активное состояние не имеет к этому никакого отношения, и я думаю, почему я и другие изначально не поняли вас. То, что вы хотите сделать, это:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>

.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
}

.current {
  font-weight: bold;
}

Здесь у вас есть nav-link классы на самих элементах a, текущая страница также получает класс current по его ссылке. Вы устанавливаете цвет для ссылки, а также текущее и активное состояния, в то же время удерживая текущую ссылку от получения состояний наведения / активного состояния с помощью комбинационного селектора not(). Наконец, мы говорим, что все с классом .current становится жирным. Просто добавьте селектор current к HTML соответствующей ссылки на каждой странице. Если это одностраничное приложение, вы можете использовать JavaScript для применения класса при нажатии на ссылку. Если у вас есть вопросы, просто дайте мне знать!

Answer 2

Если вы хотите применить стилизацию к ссылке на страницу, на которой вы сейчас находитесь, вам нужно определить, на какой странице вы находитесь в данный момент, сравнить ее с атрибутом href каждого тега a и дать имя класса current тому, чей href соответствует местоположению страницы (URL). Это невозможно сделать только с CSS.

Рендеринг на стороне сервера

Если вы используете рендеринг на стороне сервера (или просто stati c HTML страницы), вы можете просто поместить класс current CSS в правильную ссылку.

Таким образом, в main.html вы получите:

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
</ul>

И в about.html у вас будет:

<ul>
    <li><a href="main.html">HOME</a></li>
    <li class="current"><a href="about.html">ABOUT</a></li>
</ul>

Рендеринг на стороне клиента

Если вы используете рендеринг на стороне клиента (или ищете более динамичный c, меньше ручного решения), вы можете определить путь к текущей странице и затем установить класс current CSS в правом теге a, используя JavaScript.

Примечание для этого решения Я бы рекомендовал помещать класс current непосредственно в a (а не li), однако вы можете обойти это довольно легко.

Например:

const currentPathname = document.location.pathname;

const links = document.querySelectorAll("a");

links.forEach(link => {
    if (link.pathname == currentPathname) {
        link.classList.add("current");
    } else {
        link.classList.remove("current"); // possibly optional
    }
})

Рабочий пример:

const currentPathname = document.location.pathname;

const links = document.querySelectorAll("a");

links.forEach(link => {
    if (link.pathname == currentPathname) {
        link.classList.add("current");
    } else {
        link.classList.remove("current"); // possibly optional
    }
})

a.current {
  font-weight: bold;
}

<ul>
    <li><a href="/js">This Page</a></li>
    <li><a href="/">Another Page</a></li>
</ul>

Answer 3

применить стиль к тегу привязки. как .active a. На домашнем экране назначьте .active класс

<li><a class="active" href="main.html">Home</a></li>, а на странице примерно .active класс присвойте <li><a class="active" href="about.html">About</a></li>

.current a{
   color: #0078fe;
   font-weight: bold;
}

a:hover {
   color: white;
}

a:active {
   color: #0078fe;
}

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
</ul>