Question

I have a page that uses certain styles that I have defined.

On the same page I just imported an external jQuery plugin that uses its own styles, including, for example, an <a> tag style that is being overridden by my own.

How do I ensure that the styles in my stylesheet do not override the styles in the stylesheet of the jQuery plugin?

Answer 1

1) My jQuery adds a stylesheet AFTER MY stylesheet

Use !important inside your stylesheet to override any other styles.

a {
    border: none !important; /* listen to me god dammit! */
}

2) My jQuery adds a style attribute to my element which is overriding my styles.

Use the style attribute selector inside your stylesheet

a[style] {
    border: none !important; /* I even override inline styles */
}