Question

我正在使用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代码放入内联＆lt;风格＆gt;标签。因为它有！重要我不能在我的template.css中使用！imporant来覆盖它。

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

Answer 1

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

或者，编辑jcarousel

Answer 2

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

Answer 3

您可以更改代码的特殊性。如果可能，请寻找一个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%;
}

Answer 4

这就是为什么不鼓励使用!important的原因。您只能使用其他!important覆盖!important，但并非总是如此。当!important有两个规则时，则应用“最重要的”规则。

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

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

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

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

没有jQuery的示例：

<script>
window.onload = function () {
    document.getElementById("test").style.color = "yellow";
}
</script>

覆盖！重要的内联CSS

4 个答案: