Nano Hash - криптовалюты, майнинг, программирование

Выделение текущей страницы в Nav_Menu (WordPress) /w SASS

Я пытаюсь изменить цвет текста в меню навигации.

Вот мой CSS-код:

        li {
           a {
               color: $color4;
               text-decoration: none;
               display: block;
               padding: 0.25rem 5rem 0rem 0rem;
               font-size: 1.2rem;
               font-weight: bold;

               &:hover {
                   color: $color5;
               }

           }

           &.current-menu-item {
               color: $color5 !important;
               background:blue;
           }
        }

Я использую SASS вместо CSS.

Проблема в том, что .current-menu-item получает фон синего цвета, но цвет текста, кажется, не меняется, даже с печально известным !important.

Я знаю, что класс правильный, но я не могу переопределить a{}.

Любой совет?

wordpress menuitem sass
16.10.2019

Ответы:


1

Я думаю, ваша проблема в том, что вы определяете свойство color для двух разных элементов, первый раз для a и второй раз для li.

Вы можете попробовать определить цвет непосредственно на li и заставить a наследовать его:

li {
   color: $color4;

   &:hover {
       color: $color5;
   }

   &.current-menu-item {
       color: $color5;
       background:blue;
   }

   a {
       color: inherit;
       text-decoration: none;
       display: block;
       padding: 0.25rem 5rem 0rem 0rem;
       font-size: 1.2rem;
       font-weight: bold;
   }
}

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

16.10.2019

2

Джузеппедопонте был прав.

Но я сделал это по-другому, сделав это:

li {
        a {
            color: $color4;
            text-decoration: none;
            display: block;
            padding: 0.25rem 5rem 0rem 0rem;
            font-size: 1.2rem;
            font-weight: bold;

            &:hover {
                color: $color5;
            }
        }

        &.current-menu-item {
            a {
                color: $color5;
            }

        }
    }

Разница в том, что я добавил вложенный {} в выбранный класс.

16.10.2019
  • Да, это сработает, но я подумал, что лучше определить цвет шрифта рядом с цветом фона, так как они взаимозависимы. И у вас могут быть другие вещи (например, значок) внутри li, которые также должны изменить цвет. 16.10.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..