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

Question

我最近继承了一个完全使用HTML和CSS构建并使用FTP门户网站的站点。为了使该网站更加适合移动设备，我正在尝试在整个网站上实现点击呼叫电话号码功能。我使用的点击呼叫代码是经典的：

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

该网站有一个主CSS文档，为其各元素提供格式设置。其中有一个.phonenumber类，用于将电话号码设置为48像素大小，使用Arial字体，并呈现为红色。目前所有的电话号码都是这样编码的：

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

然而，当我将电话号码部分转换为<a href=tel>时，该格式会消失。即使链接位于<span>之间，格式似乎也不适用。有没有一种方法可以使用CSS类来设置点击呼叫链接的格式? 或者手动设置属性，以使数字保留其红色、48像素的格式，同时仍然作为链接?现在看起来我只能让它成为链接或格式化。如果有解决方法，请告诉我。

- Sad Bones Malone

---

听起来好像a标签有默认样式。只需用a标签包裹您的span标签，span标签就可以覆盖a标签的样式。 - Lee

另外，5年前完全错过了它，但你可以将类添加到<a>而不是<span>中，这样就像<a href='tel:whatever' class='phonenumber'></a>。 - LcSalazar

Answer 1

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

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

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

这将只匹配a标签，其href属性以"tel"值开头：

示例：

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

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

- LcSalazar

---

从技术上讲，这对于类似<a href="telephone-page.html">的东西也可以起作用。 - Anonymous

Answer 2

你只需要针对所有href属性以tel:开头的元素进行定位。

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

- Anonymous

Answer 3

听起来CSS选择器是通过引用其父元素而不仅仅是一个span来选择电话号码。类似于这样：

#parent_container_of_span span

因此，当您将其更改为链接时，它会破坏CSS。可能还会对链接应用一些额外的格式，这会搞乱一些东西。

请查看CSS并找到适用于span样式的部分，然后将其更改为以下内容。

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

那应该就可以了。

- codedude

---

只有当 href 等于 tel 时，这才会针对该链接。 - Anonymous

Answer 4

这就是你需要的

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

- Kaspersky