覆盖 CSS Class 如何？

Question

I have a Soft.CSS file which has following class

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

What i want to do here is change this Class ( please note that i DO NOT have access to Soft.CSS as it is fed from some other server ) to

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

How do i do it? using CSS? Using Jquery?

Answer 1

I think it would be enough if you make sure that your piece of css comes AFTER the Soft.css file. Most browsers only pick the last definition they find when they find double entries of the same identification.

Elsewise, you could parse the Soft.css file with PHP and do some regex on background-image and find the file name.

UPDATE
An alternative answer:

Have you thought of adding another class on every element that has the check_out -class? You could write your own css on some other class like check_out_ow and add it with jQuery:

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

I'm not sure, but I hope that the information of two classes lies deeper than of one class. Your css could look like:

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

Answer 2

If you want to redefine exactly the rule itself, not the respective css properties, well, you do have such an opportunity in javascript (not jquery)

There is document.styleSheets collection we can access. Each item is CSSStyleSheet, which has cssRules collection. But Schroedingers Cat is right, there are rare occasions when we really need to access rules directly.

Check this classic reference if you want mess up with DOM CSS.

But in your case it will definitely be better, as already metioned, to add a separate stylesheet with redefined rules.

Answer 3

As mentioned already, you only need to add your rule, either in another CSS file or directly to the page in <style> tags, after you include Soft.css.

If the order in which your CSS files are attached is also out of your control you can use increased specificity to ensure that your rule is seen as more important:

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

Answer 4

a simple solution is to give your style a higher specificity, no matter it was loaded after soft.CSS or even it was loaded before , all you have to do is to make your CSS selector for .check_out have a higher specificity, by just adding any parent class (or even ID will be better), so lets say you have a <div id="wrapper"> , that wraps all elements, then you can override your style as:

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

also you can add this id to the body (for example) if you have access to that..

refer to the following article , to know more about specificity things

Answer 5

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

jsFiddle example

It will update all instances of .check_out in the output page. I assume this is exactly what you want. You don't want to edit the class in the stylesheet itself since you don't have access to it.

Answer 6

A jquery approach would be to select on the class - $(".check_out") - and amend the css ( which I can't remember how to do ).

It does not change the class, but will change everything using the class. Of course, if you have to have the class changed because other elements are added using it, then this might not work.

It depends very much on your precise requirements and solution.