UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36

Steps to reproduce the problem:
1. inspect some element
2. view css cascade
3. wonder why some rules override others and ponder the concept of specificity (if you've heard of it before)

What is the expected behavior?
It would be good to be able to see a visual representation of specificity, even if it is simply four digits as seen in this tool : <https://specificity.keegan.st/>

What went wrong?
novice (and even more experienced) developers become confused

Did this work before? N/A 

Chrome version: 51.0.2704.63  Channel: stable
OS Version: 
Flash Version: Shockwave Flash 21.0 r0

Requested in FF too :

<https://bugzilla.mozilla.org/show_bug.cgi?id=977098>

This feature might help developers see how to craft a rule with greater specificity, or reduce the specificity of one that is unexpectedly overriding their rule.

It would also help to have this on rules that are added 'on-the-fly' using the inspector so that it can be seen why they are not being applied.