¶ Mozilla’s DOM Inspector (also available in Firefox – see update below) can seem daunting at first but is amazingly powerful. Amongst other things, it allows you to see which CSS rules are affecting any given element in order of cascade priority.
To do this, open up the DOM Inspector (Tools > Web Development) and type in your URL. Your Web page will load in the bottom frame and the DOM tree will be displayed in the top left frame. Press the pointer button (located top-left) and click an element on your Web page. The DOM tree then highlights to show the chosen element and the element details (text, attributes) appear in the top right frame. Choose CSS Style Rules from the Object drop-down and you’ll see the list of style rules applied to the element in order of cascade priority, starting with Mozilla’s internal settings. As you go down the list, each rule overwrites the previous. Explosing CSS rules in this manner makes it easy to debug the ‘why isn’t it changing colour!?’ problem often encountered during development.