I imported a jQuery plugin into my project and my <a> tag CSS is overriding its <a> tag CSS

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

if they both apply to just the a element, then CSS will use whichever one it finds last. include your stylesheet after the plug in to make sure it is the one that gets used.

Answer 2

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 */
}