如何去除高光让剖面看起来更自然

Question

我仍处于学习 html 和 css 的开始阶段，但我正在努力寻找答案。

我已经修改了此部分以添加链接，但自从我这样做以来，我无法删除链接周围的绿色框并使其看起来更自然。谁能帮我指导我做错了什么？

我正在使用 WordPress，如果这有什么区别的话。

下面是 html 代码的样子：

html代码：

<p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus libero saepe harum id, animi tenetur itaque vel repellendus temporibus delectus. Sed saepe officia repudiandae quidem blanditiis quam totam eos adipisci.
</p>
<a href="../../contact-us">GET STARTED</a>
<ul class="service-info">
    <li><i class="Defaults-phone"></i><a href="tel:[phone]">555-555-5555</a></li>
    <li><i class="Defaults-comments"></i><a href="https://wa.link/testing">Contact us on WhatsApp</a></li>
    <li><i class="fa fa-envelope"></i><a href="mailto:[email protected]">Send us a Message</a></li>
</ul>

我尝试添加自定义 css，例如以下内容以及我在 stackoverflow 上找到的其他建议，但没有成功：

a, a:focus{
  color: inherit;
  border: inherit;
  outline:none;
} 
a:link{
  text-decoration: none;
}

添加检查代码的屏幕截图（如果有帮助）：

*** 更新： 我能够根据建议来使其工作，但不能像我最初想象的那样通过添加额外的 css 来使其工作。

通过内联CSS添加它似乎可行，但现在我质疑这真的是一个好的做法吗？是否应该设置自定义变量，然后在我的 css 文件中创建一个条目以使其成为标准？或者因为我只看到它影响此页面，所以我可以保持原样吗？

更新的代码给了我我想要的结果：

<p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus libero saepe harum id, animi tenetur itaque vel repellendus temporibus delectus. Sed saepe officia repudiandae quidem blanditiis quam totam eos adipisci.
</p>
<a href="../../contact-us">GET STARTED</a>
<ul class="service-info">
    <li><i class="Defaults-phone"></i><a style="background-color:transparent;background:none;outline:none" href="tel:[phone]">555-555-5555</a></li>
    <li><i class="Defaults-comments"></i><a style="background-color:transparent;background:none;outline:none" href="https://wa.link/testing">Contact us on WhatsApp</a></li>
    <li><i class="fa fa-envelope"></i><a style="background-color:transparent;background:none;outline:none" href="mailto:[email protected]">Send us a Message</a></li>
</ul>

Answer 1

color

属性指的是元素内部的颜色，通常是文本颜色，对于绿色背景颜色，您需要定义

background-color

属性，例如：

a, a:focus{
  ...
  background-color: transparent;
  ...
} 

如评论中所述，对于该样式的更具体应用，建议您使用更具体的选择器或选择器链。

如果这不起作用，那么它可能是父样式覆盖了你的CSS，你可以使用

background-color: transparent !important;

来提高你的样式优先级，这应该作为最后的手段。需要注意的是，不同的选择器具有不同的优先级，很可能父级选择器之一具有更高的优先级，与 ID 和类相比，元素选择器具有较低的优先级：

• 内联样式（最高优先级）
• ID 选择器
• 类选择器、属性选择器和伪类
• 元素选择器和伪元素（最低优先级）

所以，长话短说，您可以编辑现有样式（如果允许更改它），或者编写具有更高优先级的选择器。

Answer 2

我认为你应该在样式中添加

background: none;

。例如：

a, a:focus{
  color: inherit;
  background: none;
  border: inherit;
  outline:none;
} 
a:link{
  text-decoration: none;
}