0

我正在使用 Wordpress 插件“NextGEN Gallery”和“JJ NextGen JQuery Carousel”，因为我正在尝试制作一个看起来很像最后一个命名插件的默认外观的轮播。问题是该插件使用带有背景图像的 div 作为按钮，它得到了这个 CSS：

div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal {
    top: 188px !important;  
}

因此，这不起作用（顶部：0px 部分）：

.jcarousel-skin-custom .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
    background-position-y: 50%;
    height: 100%;
}

令人讨厌的地方是 188px 永远不会在任何地方调用，所以我不能只编辑它以使其成为 0px，而是在浏览器中的客户端。所以我环顾四周，似乎该插件将 188px 代码放入内联 <style> 标记中。因为它有 !important 我不能只在我的 template.css 中使用 !important 来覆盖它。

是另一种否决 !important 内联使用的标签的方法吗？我真的希望保持插件可更新。

4

4 回答 4

2

覆盖的唯一方法!important是在级联中进一步使用!important，因此将其放在 jcarousel 之后的 CSS 文件中。

或者，编辑 jcarousel

于 2013-02-19T10:52:06.807 回答
1

您似乎在 html 文件中的 .css 文件之后引用 jcarousel css 文件。在样式表（.css 文件）之前保留 jcarousel .css 文件的引用。然后您可以!important再次使用来覆盖默认的 jcarousel .css 文件样式属性。

于 2013-02-19T10:56:49.660 回答
1

您可以更改代码的特异性。如果可能的话，寻找一个可能是父母的 ID。并将 !important 添加到您的顶部元素。

#ID .jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px!important;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
于 2018-11-18T14:09:04.617 回答
0

这就是为什么!important不鼓励使用的原因。您只能!important用另一个覆盖，!important而且并不总是可能的。当有两条规则时，!important应用“最重要”的一条。

现在的问题是，哪个更重要？

  1. <div class="someclass" style="inline style"></div>内联样式比普通样式更重要（例如）
  2. 更具体的规则 > 不太具体（#one .example tag .yeah > .yeah）
  3. 如果两条规则具有相同的优先级，则最后应用的规则获胜

如果您无法添加更重要的规则，则无法覆盖!important. 但是您可以在页面加载时使用脚本添加内联样式。示例（使用 jQuery）：

<script>
$(document).ready(function() {
    $("#test").css("color","blue");
});
</script>

没有 jQuery 的示例：

<script>
window.onload = function () {
    document.getElementById("test").style.color = "yellow";
}
</script>
于 2013-02-19T10:55:04.050 回答