链接的自定义边框底部也显示在图像和导航上

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、徽标、带有链接的图像等都以边框底部显示。但我希望这种设计仅适用于内容中的外部链接和内部链接。这里怎么区分，有没有人有想法？

使用插件，我至少可以将类添加到外部链接，但我不知道如何将其也应用于内容内而不是菜单、徽标、图像等的内部链接.

非常感谢您的帮助！

Answer 1

假设您想要的只是将新样式添加到链接正文内：

使用您现在拥有的 CSS，包装在 <a> 标记中的所有内容都将应用这些样式。您要做的是更多地指定您的 CSS 选择器。尝试并右键单击 -> 检查您希望应用这些样式的链接，并确定内联链接是否应用了任何类型的唯一类（即“link_inline”），然后您将例如执行a.link_inline {/* your CSS */} .

另一种方法是找到页面上所有文本的任何父元素的唯一类（即“content_wrapper”）。然后你会做.content_wrapper a {/*your CSS */}