Ссылка остается подчеркнутой даже после оформления текста: нет

Question

Я делаю навигационную панель для сайта, созданного через GatsbyJS. Я пытаюсь стилизовать ссылки в навигационной панели так, чтобы они не были подчеркнуты.

Я уже установил, что ссылка не имеет никакого текстового оформления - когда я проверяю элемент в своем браузере, он даже показывает свойство «text-ornament: none». Я также подтвердил, что мой CSS влияет на объект - я могу изменить цвет текста, например, это только текстовое оформление, на которое я не могу влиять.

CSS:

.nav {
  background: #fd8;
}

.nav ul {
  text-align: center;
  border: 1px solid #000;
}

.nav ul li {
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
}

.nav ul li a {
  color: #221;
  text-decoration: none;
}

html + js:

...
import { Link } from "gatsby"
import styles from "./navbar.module.css"

...

      <nav className={styles.nav}>
        <ul>
          <li>
            <Link style={{ textDecoration: 'none' }} to="/about">
              About
            </Link>
          </li>

РЕДАКТИРОВАТЬ: встроенный стиль с textDecoration был продуктом некоторой путаницы, которую я делал до публикации этого вопроса и не присутствовал до недавнего времени. Удаление не влияет на проблему.

Предоставлено HTML по запросу:

<nav class="navbar-module--nav--25Dcz">
  <ul>
    <li>
      <a href="/#">About</a>
    </li>
    ...
  </ul>
</nav>

Answer 1

Я обнаружил, что ошибочное подчеркивание на самом деле было тенью в 1 пиксель, вероятно, из какого-то глобального стиля, который я не могу найти связанного с плагином Gatsby Typography.

Answer 2

Ваша проблема в том, что вы используете селектор классов (.nav), когда вам следует вместо этого использовать селектор имени тега. Изменение на nav ul li a{text-decoration:none} должно исправить вашу проблему. Если это не сработает, значит, у вас где-то есть CSS с более высоким приоритетом, который его переопределяет.

Answer 3

Когда вы говорите .nav, вы хотите выбрать класс по этому. И, как я вижу, в вашем html,

nav (<nav...) - это тег с классом navbar-module--nav--25Dcz

Так что если вы измените свой CSS на:

(Удалить символ точки . из .nav)

nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}

Должно работать нормально.

Также обратите внимание на стилизованные компоненты: https://www.styled -components.com / , которые позволяют писать CSS в JS и использовать аналогичные функции препроцессоров, такие как Less и SASS.

Надеюсь, это поможет!