html - 如何在不同的页面上用不同的颜色设置电话链接的样式 css

Question

目前我的网站上有一个电话链接:

HTML

Give us a call today on <a href="tel:+441234123456">01234123456</a>

CSS

a[href^="tel:"] {
  font-size:12px;
  font-color:white;
}

唯一的问题是，在另一个页面上，我将电话号码显示为某些文本的一部分，我需要在此页面上以黑色显示电话号码，但我不确定如何覆盖它？

有什么想法吗？

Answer 1

简单的答案:向这个手机容器添加一个特定的类。

<a class="phone-green" href="tel:+441234123456">01234123456</a>

然后在css文件中添加类修饰符:

a[href^="tel:"].phone-green {
  font-size: 12px;
  color: white;
}