问题
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.
回答4:
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
回答5:
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
来源：https://stackoverflow.com/questions/5876936/safari-chrome-developer-tools-debug-css-overrides