用 Skype 插件更改 CSS 中的电话号码样式答案

【问题标题】：Styling a phone number in CSS that has been altered with the Skype plugin用 Skype 插件更改 CSS 中的电话号码样式
【发布时间】：2013-01-22 05:22:00
【问题描述】：

我们网站顶部有一个电话号码，客户当然可以给我们打电话。我有 Skype 插件，它很方便，而且我注意到其他用户也有它。但它完全抛弃了设计。我注意到网页的 html 用 css 样式更改。有没有一种标准方法可以改变 Skype 电话号码的外观？

更新：电话号码被更改，周围添加了这个span标签：

<span class="skype_pnh_print_container_1359399953">

然后有大量的span 标签，这是当您将鼠标悬停在电话号码上时的 Skype 菜单（最初是隐藏的）。我可以使用此类覆盖样式，但我想确保以正确的方式执行此操作，以便它适用于不同（较新）版本的 Skype 和所有浏览器（Skype 在其他系统中的工作方式可能不同？）。没有官方的处理方式吗？

【问题讨论】：

Skype 是否使用!important？如果没有，您也许可以用您自己的!important 覆盖它。
如果可能的话，我建议设置一个顶级类。并覆盖使用它与使用!important。
如果你在结果页面上使用检查工具，你能看到电话号码现在是哪种风格吗？
我发现 information 关于完全删除样式以及 preventing 可能有用的样式
顺便说一句，我不确定您是否应该更改号码的样式。安装了 Skype 插件的人习惯了这样的电话号码，如果您将其从（对他们来说是什么）默认更改，他们可能无法识别它。

标签： css skype

【解决方案1】：

body span.skype_pnh_container { 
    /* "body" is not really necessary */
    /* here, but it increases CSS */
    /* specificity – just in case ... */

    display: none !important; 
    visibility: hidden !important; 
}

body span[class^="skype_pnh_container"] { 
    /* override the 'skype' styling */
    color: red!important;
    background-color: green!important;
}

body span[class^="skype_pnh_print_container"] {
    display: inline !important;
}

从网上复制粘贴

另外，根据http://forum.skype.com/index.php?showtopic=78380，您可以使用以下 META 标签来防止它：

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

继续

【讨论】：

感谢谁重新修改了我的代码的 cmets 以获得更好的可读性。

【解决方案2】：

以下是我设置 Skype 链接的样式：

a[href^="skype:"] {
  color: white;
}

就我个人而言，我没有看到任何额外的标记，例如额外的 Skype 跨度标签，所以上面的 CSS 代码应该适用于任何 Skype 通话链接。

【讨论】：

我使用上面的 CSS 选择器已经很久了。我确信这个解决方案是最干净的，无论浏览器/平台或需要 META 标签注入。