Question

我有一个Soft.CSS文件，其中包含以下类

.check_out {
width:58px;
background-image:url(/a/i/softadd/checkout.gif);}

我想在这里做的是更改此课程（请注意我无法访问Soft.CSS，因为它是从其他服务器提供的）到

.check_out {
width:58px;
background-image:url(/myserver/checkout.gif);}

我该怎么做？用CSS？使用Jquery？

Answer 1

我认为如果你确保你的{c}字段在Soft.css文件之后出现就足够了。大多数浏览器只选择他们在找到相同标识的双重条目时找到的最后一个定义。

另外，您可以使用PHP解析Soft.css文件并在background-image上执行一些正则表达式并找到文件名。

更新
另一个答案是：

您是否考虑在每个具有check_out类的元素上添加另一个类？您可以在check_out_ow等其他类上编写自己的css，并使用jQuery添加它：

$(document).ready(function()
{
    // every element gets an extra class with custom information
    $('check_out').addClass('check_out_ow');
});

我不确定，但我希望两个班级的信息比一个班级更深入。你的CSS可能看起来像：

.check_out.check_out_ow {
width:58px;
background-image:url(/myserver/checkout.gif);}

Answer 2

如果你想重新定义规则本身，而不是相应的css属性，那么你在javascript（而不是jquery）中确实有这样的机会

我们可以访问document.styleSheets集合。每个项目都是CSSStyleSheet，它有cssRules集合。但Schroedingers Cat是对的，在极少数情况下我们真的需要直接访问规则。

如果您想搞砸DOM CSS，请查看this经典参考。

但是在你的情况下，如已经提到的那样，添加一个带有重新定义规则的单独样式表肯定会更好。

Answer 3

如前所述，在包含Soft.css之后，您只需要在另一个CSS文件中添加规则或直接添加到<style>标记中的页面。

如果附加CSS文件的顺序也不受控制，您可以使用更高的特异性来确保您的规则更重要：

div.check_out { /* assuming the element is a div */
width:58px;
background-image:url(/myserver/checkout.gif);}

Answer 4

一个简单的解决方案是让你的风格具有更高的特异性，无论它是在soft.CSS 之后加载，还是在之前加载，你所要做的就是让.check_out的CSS选择器具有更高的特异性，只需添加任何父类（甚至ID会更好），所以假设你有一个<div id="wrapper">，包装所有元素，然后您可以将样式覆盖为：

#wrapper .check_out {
    width:58px;
    background-image:url(/myserver/checkout.gif);
}

如果您有权访问，也可以将此ID添加到正文中（例如）。

请参阅以下article，了解有关特殊事物的更多信息

Answer 5

$(function () {
    $('.check_out').css('background-image', '/myserver/checkout.gif');
});

<强> jsFiddle example

它将更新输出页面中.check_out的所有实例。我认为这正是你想要的。您不希望在样式表本身中编辑该类，因为您无权访问它。

Answer 6

jquery方法是在类上选择 - $（“。check_out”） - 并修改css（我不记得该怎么做）。

它不会更改类，但会使用类更改所有内容。当然，如果你因为使用它添加其他元素而必须更改类，那么这可能不起作用。

这在很大程度上取决于您的精确要求和解决方案。

覆盖CSS类如何？

6 个答案: