Итак, вы сталкиваетесь с тем, что определяющие CSS правила по отдельности, основанные на имени тега или имени класса, не применяются, но, если вы укажете CSS в качестве значения атрибута, то оно будет применено. Давайте подумаем вместе:
Правило по тэгу
a{
text-decoration: none;
}
Вы разумно ожидаете, что это правило будет применено к привязке, но это не так. Это, очевидно, означает, что какое-то другое правило CSS (или Javascript) отменяет его. Инструменты разработки браузера могут помочь вам, просто щелкните правой кнопкой мыши в любом месте вашей страницы и нажмите «Проверить» (или аналогичный вариант). Внутри панели Dev Tools вы должны увидеть вкладку Elements, которая показывает HTML и нажимая на элементы, вы должны увидеть CSS правила справа, как на рисунке ниже:
Итак, я советую вам нажать на якорь, где вы ожидаете, что ваше правило будет применено, и посмотреть, что CSS применяется там. Правило, которое вы намереваетесь указать здесь, будет зачеркнуто, потому что что-то с более высоким приоритетом переопределяет его (другой случай - правило с аналогичным уровнем prio оценивается позже и переопределяет это). Вы должны увидеть, какое правило text-decoration применено, и можете осторожно навести указатель мыши на это правило и установить его флажок, чтобы отключить его. Это включит правило, применяемое к этому атрибуту со вторым уровнем приоритета в иерархии и так далее. Этот процесс еще не является решением, он исследует проблему. После этого исследования вы узнаете, в чем проблема.
Правило по классу
.test {text-decor: none; }
Ситуация либо аналогична описанной в предыдущем разделе (переопределение правил из-за более высокого приоритета или аналогичного приоритета, но позже в коде), либо возможно, что по какой-то причине test class удалено из тега. Итак, на вкладке Элементы консоли браузера вы увидите, есть ли у этого элемента еще класс. Если нет, то поэкспериментируйте, отредактировав тег и записав в него этот класс, и посмотрите, применимо ли ваше правило или нет. Если у тега есть класс, но правило не применяется, то у нас есть проблема, аналогичная описанной в предыдущем разделе.
Решение
Лучшее решение - выяснить, что проблема в том, почему другие элементы применяются к этому элементу и действуют соответственно. Сейчас вы можете применить правило типа
a.test#test {
text-decoration: none;
}
и, конечно, добавить test в качестве идентификатора к вашему tag, как показано ниже:
<a href="#" class="test" id="test">
, и если это все еще не работает, тогда есть большая вероятность, что другое правило, которое вызывает у вас проблемы, имеет важное значение. Если это так, попробуйте удалить другое правило. Если это не вариант, посмотрите, что представляет собой селектор другого правила, и убедитесь, что селектор вашего тега противоречит ему.