Настраиваемая нижняя граница для ссылок также отображается на изображениях и в навигации.

Question

В настоящее время я создаю веб-сайт на WordPress и хочу настроить дизайн ссылок. Я использовал следующий код:

a:link {
    color: inherit;
    transition: color 0.1s ease-in 0s, background-color 0.1s ease-in 0s, border-bottom-color 0.1s ease-in 0s;
    text-decoration: none;
    border-bottom: 1px solid rgb(238, 0, 0);
}

a:hover {
    color: rgb(238, 0, 0);
    border-bottom-color: rgb(238, 0, 0);
}

Но после использования этого кода практически все приобрело дизайн с нижней границей. Menulinks, lo go, изображения со ссылками и т.д. c. отображаются с нижней границей после добавления этого кода. Но я бы хотел, чтобы этот дизайн применялся только к внешним ссылкам и внутренним ссылкам в контенте. Как отличить guish здесь, есть ли у кого-нибудь идеи?

С помощью плагина я смог добавить классы по крайней мере к внешним ссылкам, но я не знаю, как это сделать примените это к внутренним ссылкам, которые находятся внутри содержимого, а не в меню, lo go, images et c.

Заранее большое спасибо за помощь!

Answer 1

Предполагая, что вы хотите добавить свои новые стили только к ссылкам внутри основного текста :

с CSS, которое у вас есть прямо сейчас, все, что заключено в * Эти стили будут применены к тегу 1005 *. Что вы хотите сделать, так это указать дополнительные селекторы CSS. Попробуйте и щелкните правой кнопкой мыши -> проверьте ссылку, к которой вы хотите применить эти стили, и выясните, имеют ли встроенные ссылки какой-либо уникальный класс, примененный к ним (например, «link_inline»), тогда вы, например, сделаете a.link_inline {/* your CSS */} .

Другой метод - найти уникальный класс любого родительского элемента всего текста на странице (например, «content_wrapper»). Тогда вы бы сделали .content_wrapper a {/*your CSS */}