更改css Microsoft Translator网页小部件

我将MS translator网页小部件包含在我的web应用程序的一个页面中

代码如下：

<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>

setTimeout（函数（）{{
var s=document.createElement（'script'）；
s、 type='text/javascript'；
s、 字符集='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）；

它可以工作，但是微软使用了两个css（

WidgetLauncher.css

和

WidgetV3.css

） 在我的css之后调用，所以更改一些css属性值是无用的

---

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

不幸的是，Microsoft Translator小部件似乎没有太多支持

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

• 发展商-
• API-
• Web小部件API-

此外，Microsoft支持（）还提到：

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

因此，您可能能够使用AJAX API定制小部件，尽管这篇文章很老（2009年）

• AJAX API-

---

尽管看起来很难看，但使用

可能会更好！重要信息

如果需要覆盖CSS属性。

任何标记为的CSS！重要信息将覆盖那些css文件。你试过了吗

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

---

如果您更具体地了解要更改的样式，这会有所帮助，因为控件的不同部分采用不同的样式

例如，按钮的背景色通过javascript设置为内联样式，但初始值由id为MicrosoftTranslatorWidget的span上的

背景色

属性控制（您已经将其设置为黑色）

您也可以在样式表中这样设置，而不是使用内联样式：

#MicrosoftTranslatorWidget{
背景色：#000；
}

按钮上的文本颜色更难覆盖。它通过选择器

#MicrosoftTranslatorWidget*

在微软的样式表中设置。要覆盖该样式，您需要使用，例如，类似以下内容：

span#MicrosoftTranslatorWidget*{
颜色：白色；
}   

你也可以按照projeqht和Facundo Colombier的建议使用一条规则，但这通常是最后的选择，而且也不总是足够的

例如，悬停背景色是通过

.TranslatePhrase:hover

选择器设置的，但它已经在使用

！重要信息

规则，因此这不足以覆盖它。您需要使用具有更高特异性的选择器以及

！重要信息

使您的风格优先的规则

div.TranslatePhrase:悬停{
背景色：蓝色！重要；
}

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

！重要

规则

---

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

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

！重要信息

特殊性

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

---

对MS css还将一些属性定义为！重要的。但“奇怪”的是，如果我看到html代码，外部css就在我之前。