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

Question

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

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

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

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

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

Answer 1

您可以使用属性选择器将href值的开头与"tel"匹配，使用前缀比较^= ：

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

这将仅匹配href属性以“tel”值开头a标记：

例：

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

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

Answer 2

听起来CSS正在通过引用其父级而不仅仅是跨度来选择电话号码。 有点喜欢：

#parent_container_of_span span

因此，当您将其更改为链接时，它会破坏CSS。 也可能有一些额外的格式适用于一般的链接搞乱的东西。

看看你是否可以进入CSS并找到将样式应用于跨度的部分并将其更改为以下内容

a[href="tel"] {
    /*styles here*/
}

这应该够了吧。

Answer 3

您只需要定位href属性以tel:开头的所有元素。

a[href ^= 'tel:'] {
    font-weight: bold;
}

Answer 4

这就是你所需要的

a[href^="tel:"]
{
// your desired style
}