Почему мой компонент Vue игнорирует медиа-запросы?

Question

У меня есть этот фрагмент кода, который игнорируется в ограниченном стиле компонента Vue.

        nav {
            background: none;
            box-shadow: none;

            .sidenav-trigger {
                background: none;
                border: none;
                cursor: pointer;

                i {
                    color: #f8f9fa;
                    font-size: 36px;
                }
            }
        }
    }

    @media (max-width: 768px) {
        nav {
            background: #f8f9fa;

            .sidenav-trigger {
                i {
                color: rgba(0, 0, 0, 1);
                }
            }
        }
    }

Пытался использовать минимальную ширину и другие особенности css, но, к сожалению, ни один из они работали. Более того, я использовал разные браузеры для дальнейшего исследования, но это не имело никакого отношения к проблеме. Кроме того, я не забыл поместить тег области просмотра в файл index. html. Любая помощь будет принята с благодарностью, спасибо.

Answer 1

похоже, что у вас есть еще один селектор выше, например: section nav и только в медиа-запросе nav. чем первое выражение выше уровня.)