Safari/Chrome Developer Tools debug CSS overrides

Question

Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.

Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.

Is there a way to know what overrides such a rule?

Answer 1

Look at the one which isn't striked out, higher up on the list.

Alternatively, view the computed styles. They will be the definitive applied styles.

Answer 2

When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.

If you click on a property, it will give you the file and the line number.

Answer 3

Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.

Answer 4

Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.

Answer 5

Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.