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

Question

I currently have a tel link on my site:

HTML

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

CSS

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

The only problem is that on another page I have the telephone number showing as part of some text and I need to show the tel number on this page in black and I am not sure how I override this?

Any ideas?

Answer 1

Use color: attribute instead of font-color: .

I would go like this :

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

You should give a class to your a tag, like this :

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

in order to assign a color to this specific class, like this :

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

Good luck !

Answer 2

Simple answer: add an specific class to this phone container.

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

Then add a class modifier in css file:

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