Javascript jQuery在外部JS加载后替换外部CSS中的CSS类

我正在尝试为一个通过外部JS/CSS包含外部TripAdvisor小部件的网站创建更多的移动响应tap目标。我想我应该使用jQuery将默认的外部CSS类替换为在移动设备的媒体查询中定义的自定义本地CSS类

下面是包含的TripAdvisor小部件的屏幕截图，以及在Inspector中查看的呈现代码

我需要用jQuery替换的外部CSS类称为“widEXCLINK”。我想用一个名为“tripAdvisorMobile”的类替换外部CSS类

我的jQuery代码位于WordPress页脚小部件控件中，看起来像这样，但它似乎没有进行替换。但是，当我在Inspector中手动进行替换时，它仍然有效。我错过了什么？开发人员站点的链接是

$（文档）.ready（函数（）{
$（“WidexLink”）.removeClass（“WidexLink”）；
$（“WidexLink”）.addClass（“tripAdvisorMobile”）；
});

解决方案的方法有两个问题

$("widEXCLINK")

应该是

$(".widEXCLINK")

如果不包括

sizzle引擎，它将尝试按名称

WidexLink

第二个问题是特殊性,

.tripAdvisorMobile{

特异性-->0

应具有更好的特异性

#CDSWIDEXC.widEXC.widEXCLINK

特异性-->0 1 2 0

由于第二个具有更高的特异性，因此将应用该样式。要应用样式，您必须这样做

@media only screen and (max-device-width: 480px) {
    `#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {`   specificity --->  0 1 3 0

---

并且不再需要任何jQuery来摆脱这个类。

谢谢。我已经删除了jQuery指令，只是将我所有的移动代码放在媒体查询中的

#CDSWIDEXC.widEXC.widEXCLINK.tripAdvisorMobile{

下，而不是

.tripAdvisorMobile下{

但是，我没有看到我预期的变化。我如何确定这种特殊性是否生效？对于测试，您可以尝试两种方法，要么删除媒体查询标签以检查应用的样式，要么使用chrome开发工具切换到移动模拟器模式并播放屏幕大小。

$(".widEXCLINK")

@media only screen and (max-device-width: 480px) {
    `#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {`   specificity --->  0 1 3 0