Нужна помощь в оформлении активной ссылки

0

Если я установил цвет шрифта для стилей в моем неупорядоченном списке для моей панели навигации, как я могу преодолеть это с помощью.class на конкретном элементе?

Например, здесь моя навигация:
Главная
Сервисы
Около
Свяжитесь с нами

И поэтому я установил в своем CSS для цвета шрифта навигации № 000.

Теперь, что мне делать, если я хочу переместить только один из элементов, чтобы быть конкретным цветом с классом? Потому что я пытаюсь использовать класс на одном из них, но он не справляется с этим.

  • 1
    Разместите свой CSS и HTML.
  • 0
    Мне очень трудно разместить здесь свой код. Дайте мне хотя бы одну минуту, я опубликую это.
Теги:
list
navigation

2 ответа

2

Если каждый из элементов находится под их собственным ли, вы можете установить один из этих li, как этот li class="home" Home li и в css поставить.home {color: # 000}, если я правильно прочитал вопрос, это должно помочь, если не извините, я новичок в этом. Корри, я бы написал его в коде, но все равно должен познакомиться с этим сайтом.

  • 2
    Добро пожаловать! Многие люди используют jsfiddle или codepen, чтобы проиллюстрировать моменты, которые требуют HTML, CSS и JS, но если ответ краткий (как и у вас), то формат, который вы использовали, вполне подойдет.
0

Вы можете использовать: active pseudo element.

Если ваш HTML-код:

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Вы можете сделать это с помощью CSS:

nav a {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

nav a:hover {
    color: #3e82f7;
}

nav a:active {
    color: #db4437;
}

nav a:visited {
    color: #ffeb3b;
}

Если вы пытаетесь указать, на какой странице находится пользователь, вы, вероятно, захотите структурировать свой HTML по этим строкам:

<nav>
    <ul>
        <li><a class="current-page" href="home.html">Home</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

И ваш CSS:

nav a {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.current-page {
    color: #3e82f7;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню