使用CSS类格式化href:tel链接

Question

我最近继承了一个完全用HTML和CSS构建并使用FTP门户的网站.为了使网站更具移动友好性,我正试图在他们的网站上实现点击呼叫电话号码.我用来点击调用的代码是经典代码:

<a href="tel:#number">#number></a>

该站点有一个主CSS文档,它为其站点的各个元素提供格式.有一个.phonenumber类将电话号码设置为48px,使字体为arial,红色.目前所有的电话号码都是这样编码的:

<span class="phonenumber"> phone #</span>

但是,当我将手机#部分变成a时,这种格式消失了<a href=tel>.即使链接之间的<span>格式似乎也不适用.有没有办法使用CSS类格式化点击呼叫链接？或者手动设置属性,以便数字保留其红色,48px格式,同时仍充当链接？现在它似乎我可以将它作为链接或格式化.如果有解决方法,请告诉我.

Answer 1

您可以使用属性选择器来匹配href值的开头"tel",使用前缀比较^=:

a[href^="tel:"] {
}

这将仅匹配属性以"tel"值开头的a标记href:

例:

a[href^="tel:"] {
  color: red;
}

<a href="http://www.google.com">Test 1</a><br />
<a href="tel:+123456">Test 2</a>