如何在不同页面 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

使用color:属性而不是font-color: 。

我会这样：

a {
  font-size:12px;
  color: #FFF;
}

你应该给你a标签一个类，像这样：

<a class="phone-number">+4412666666</a>

为了给这个特定的类分配一种颜色，像这样：

a.phone-number {
  font-size:12px;
  color: #FFF;
}

祝你好运！

Answer 2

简单的回答：向这个电话容器添加一个特定的类。

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

然后在css文件中添加一个类修饰符：

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