html - 使用 CSS 类格式化 href :tel link

Question

我最近继承了一个完全用 HTML 和 CSS 构建并使用 FTP 门户的网站。为了使网站对移动设备更加友好，我正在尝试在他们的网站上实现点击通话电话号码。我用于点击调用的代码是经典代码:

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

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

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

但是，当我将电话号码部分变成 <a href=tel> 时，这种格式消失了.即使链接在 <span> 之间格式似乎不适用。有没有办法使用 CSS 类来格式化点击通话链接？或者手动设置属性，使数字保留其红色、48 像素格式，同时仍充当链接？现在看来我可以将其作为链接或对其进行格式化。如果有解决方法，请告诉我。

Answer 1

您可以使用 Attribute Selectors 将 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>