如何在不同页面 css 上使用不同颜色设置电话样式 link

Question

我目前在我的网站上有一个电话 link：

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 标签一个 class，像这样：

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

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

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

祝你好运！

Answer 2

简单的答案：将特定的 class 添加到此 phone 容器。

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

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

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