更改 css 微软翻译网页小部件答案

【问题标题】：Change css Microsoft Translator Web Page Widget更改 css 微软翻译网页小部件
【发布时间】：2013-08-04 08:55:36
【问题描述】：

我在我的网络应用程序的一个页面中包含 MS 翻译器网页小部件。

这是代码：

<span id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#000;'></span>

   <script type='text/javascript'>
   setTimeout(function(){{
      var s=document.createElement('script');
      s.type='text/javascript';
      s.charset='UTF-8';
      s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=False&ui=true&settings=Manual&from=en';
      var p=document.getElementsByTagName('head')[0]||document.documentElement;
      p.insertBefore(s,p.firstChild); }},0);
   </script>

它有效，但 Microsoft 使用来自 http://www.microsofttranslator.com/static/187544/css/ 的两个 CSS（WidgetLauncher.css 和 WidgetV3.css）在我的 css 之后调用，因此更改某些 css 属性值是没有用的。

是否存在可能的解决方案？

【问题讨论】：

标签： css widget microsoft-translator

【解决方案1】：

任何标记为 !important 的 css 都会覆盖这些 css 文件。你试过吗？

#LauncherTranslatePhrase{
    background-color: red !important;
}

【讨论】：

是的。 MS css 也将一些属性定义为 !important。但“奇怪”的是，如果我看到 html 代码，extern css 是在我之前包含的。

【解决方案2】：

如果您更具体地说明要更改的样式会有所帮助，因为控件的不同部分以不同的方式设置样式。

例如，按钮的背景颜色通过 javascript 设置为内联样式，但初始值由 ID 为 MicrosoftTranslatorWidget 的 span 上的 background-color 属性控制（您已经已设置为黑色）。

<span id='MicrosoftTranslatorWidget' class='Dark'
  style='color:white;background-color:#000;'></span>

除了使用内联样式，您还可以像这样在样式表中设置它：

#MicrosoftTranslatorWidget {
  background-color:#000;
}

按钮上的文本颜色覆盖起来更复杂。它是通过选择器 #MicrosoftTranslatorWidget * 在 Microsoft 的样式表中设置的。要覆盖该样式，您需要使用a more specific selector，例如像这样：

span#MicrosoftTranslatorWidget * {                       
  color:white;
}

您也可以按照 projeqht 和 Facundo Colombier 的建议使用 !important 规则，但这通常最好作为最后的手段，而且并非总是如此反正就够了。

例如，悬停背景颜色是通过.TranslatePhrase:hover 选择器设置的，但它已经在使用!important 规则，因此这不足以覆盖它。您需要使用具有更高特异性的选择器以及!important 规则来使您的样式优先。

div.TranslatePhrase:hover {
  background-color:blue !important;
}

通常，您首先需要使用浏览器的 Web 检查器来确定用于设置特定属性的 CSS 选择器。然后，您可以使用自己的选择器覆盖它，方法是使用更高的特异性，如有必要，还可以使用 !important 规则。

为了帮助计算（和理解）CSS 选择器的特殊性，我强烈推荐 Keegan Street 的 Specificity Calculator。

【讨论】：

【解决方案3】：

您可以使用 javascript 解决方案吗？如果是这样，那么使用这样的代码直接操作元素的样式。以这种方式定义的规则会覆盖样式表中的任何内容，甚至是 !important 特异性。

window.onload = function(){
    document.getElementById("MicrosoftTranslaterWidget").style.backgroundColor = red;
}

【讨论】：

【解决方案4】：

不幸的是，微软翻译小部件似乎没有太多支持。

以下是一些可能有用的链接：

开发人员 - http://www.microsoft.com/en-us/translator/developers.aspx
API - http://msdn.microsoft.com/en-us/library/dd576287.aspx
Web 小部件 API - http://msdn.microsoft.com/en-us/library/dn341983.aspx

另外，微软支持 (http://social.msdn.microsoft.com/Forums/en-US/e389bff3-fbd3-4405-82ca-71a03b66c2eb/design-the-ms-translater-widget) 提到：

如果您需要更多的可定制性，您始终可以使用 AJAX API（这是构建小部件的基础）。

因此，您也许可以使用 AJAX API 自定义小部件，尽管那篇文章已经很老了（2009 年）。

AJAX API - http://msdn.microsoft.com/en-us/library/ff512385.aspx

虽然看起来很丑，但如果您需要覆盖 CSS 属性，最好使用 !important。

【讨论】：