Hello everyone, I’m fairly new to HTML/CSS/JS, and I thought I had a decent idea of how Specificity was decided…However, I’ve got an issue I’m just not understanding. I’ve got a situation where a inline rule with !Important set via JS is being overwritten by an External Style Sheet rule.
Notice in the picture under ‘inherited from body’, my Cursor rule (which is set inline with !Important from JS) is being overruled by a regular External CSS rule. This happens both in Firefox and Chrome, and there are definitely no other !Important rules anywhere in any part of code. I thought that !Important trumped everything aside from another !Important with more specificity.
http://i65.tinypic.com/nvseaq.jpg
Any clarification on what is/might be causing this is appreciated, thank you for reading.
[UPDATE]
Took a break and did some more reading, seems like anything Inherited from a parent will be overruled by any non-inherited rule…With that in mind, is there any agreed on way to force a mouse cursor to use a specific icon when desired? I’m thinking maybe a single invisible div over the page with corresponding cursor rules.
