Существует множество причин, по которым стили CSS могут не работать или не отображаться корректно: 1. Ошибки в коде: Неправильный синтаксис или опечатки могут привести к тому, что ваш CSS код не будет работать. 2. Конфликт стилей: Если вы используете несколько CSS файлов или стилевых блоков в одном документе, возможен конфликт между ними. В этом случае стили, которые расположены ниже в коде, будут переопределять стили, которые идут выше. 3. Кэширование: Ваш браузер может кэшировать старую версию CSS файла. В этом случае очистка кэша браузера может помочь. 4. Некорректная ссылка на CSS файл: Убедитесь, что ссылка на CSS файл в вашем HTML файле правильная. Отметки сервера должны быть настроены правильно. 5. Несоответствие спецификаций: Некоторые стили могут не работать в определенных браузерах или версиях браузеров. 6. Приоритет стилей: Определенные селекторы могут иметь больший вес, чем другие. Например, стили, применяемые непосредственно к элементу с помощью атрибута style, имеют приоритет над стилями, определенными в CSS. 7. Значения по умолчанию: Пара браузеров могут иметь разные значения стилей по умолчанию. 8. Проблема с !important: Если вы используете !important в своих стилях, возможно, стили, которые вы пытаетесь применить, не действуют, как ожидалось. 9. Отсутствие поддержки CSS свойств: Ваш браузер может не поддерживать некоторые CSS свойства, которые вы используете для стилизации элементов. За подробностями обращайтесь к документации или используйте сайт Can I use.
Если исправить все "технические" ошибки, которых у тебя много:
1. Удали лишний закрывающий </div> в <template>.
2. Вместо v-on: mouseover="out" должно быть слитно v-on:mouseover="out".
3. Закрывающийся объект экспорта должен быть после data и methods.
4. Вместо <styles> используй <style>, и, скорее всего, нужен <style lang="scss">.
Возможные ошибки:
1. Убедись, что у тебя есть методы out и select.
2. Убедись, что у тега <a> есть href="#" или, лучше, используй v-on:click.prevent, чтобы не открывалась новая вкладка при клике. Лучше вообще не использовать <a> для нессылочных элементов.
3. Возможно, тебе нужно, чтобы класс one был применен, только если one является строкой, в таком случае используй: v-bind:class="[one, { stels: stels }]" или, в худшем случае: v-bind:class="{ [one]: one, stels: stels }".
В целом, рекомендую использовать IDE, она поможет заметить эти ошибки заранее. Например, VSCode - бесплатная и хорошо подойдет.
Если исправить все технические ошибки, код Vue будет работать и переключение будет функционировать.
Ошибки, из-за которых код не собирается и выводится сообщение об ошибке в консоль:
1. Имеется лишний закрывающий тег `</div>` внутри `<template>`.
2. Атрибут `v-on: mouseover="out"` должен быть написан слитно, как `v-on:mouseover="out"`.
3. Объект, который должен быть экспортирован, закрывается после определения `data`. Методы `methоds` остаются без закрывающего тега.
4. Нужно использовать `<style>`, а не `<styles>`, а также, судя по вложенности, возможно использование препроцессора SASS `<style lang="scss">`.
Потенциальные ошибки:
1. Возможное отсутствие методов `out` и `select`.
2. Отсутствие атрибута `href="#"` у тега `<a>`, либо лучше использовать `v-on:click.prevent`, чтобы предотвратить открытие ссылки в новой вкладке. Или вообще, использовать тег `<button>`, если это не ссылка.
3. Вероятно, ты хочешь присвоить класс на основе значения переменной `one`, а не использовать класс с названием `one`. В таком случае, синтаксис должен выглядеть так: `v-bind:class="[one, { stels: stels }]"`, или менее предпочтительно: `v-bind:class="{ [one]: one, stels: stels }"`.
В целом, рекомендуется использовать IDE, которая поможет выявить такие ошибки заранее. Например, бесплатный редактор VSCode отлично подходит для этих целей.