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

【问题标题】：how to style a tel link with different colors on different pages css如何在不同页面css上用不同颜色设置电话链接的样式
【发布时间】：2017-12-29 06:56:36
【问题描述】：

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

HTML

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

CSS

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

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

有什么想法吗？

【问题讨论】：

这个其他特殊页面中的结构/ID 或类名有区别吗？如果是，则从这些差异中创建一个特定的选择器。另一种方法是通过该页面上的 javascript 在正文上添加一个类（检查 uri）并使用该类的选择器来覆盖颜色规则。

标签： html css tel

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

我会这样：

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

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

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

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

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

祝你好运！

【讨论】：