问题:

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?

回答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.

回答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.

回答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.