How do I know why a CSS style is ignored?

Question

I usually trace my CSS stylesheet by using the Chrome web browser.

I can see that some of my styles are being ignored by the inspection window of Chrome - the style is struck out with a black line.

I cannot see why it is being ignored. Usually, I follow all the styles using my eyes to see why it is ignored.

Can I know the structure (inheritance) information by Chrome or by other method?

Answer 1

In Short, Specificity

From CSS Specificity: Things You Should Know:

1. Specificity determines, which CSS rule is applied by the browsers.
2. Specificity is usually the reason why your CSS-rules don't apply to some elements, although you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
6. You can understand specificity if you love Star Wars: CSS Specificity Wars.
7. You can understand specificity if you love poker: CSS Specificity for Poker Players.
8. When selectors have an equal specificity value, the latest rule is the one that counts.
9. When selectors have an unequal specificity value, the more specific rule is the one that counts.
10. Rules with more specific selectors have a greater specificity.
11. The last rule defined overrides any previous, conflicting rules.
12. The embedded style sheet has a greater specificity than other rules.
13. ID selectors have a higher specificity than attribute selectors.
14. You should always try to use IDs to increase the specificity.
15. A class selector beats any number of element selectors.
16. The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
17. You can calculate CSS specificity with CSS Specificity Calculator.

For example

If you had a p with class a, what would you predict it's color would be based on the following rules:

p.a { color: red;  }
 .a { color: blue; }

If you said blue, you'd be wrong!

As Alochi pointed out, if you're looking for more of a Tree View of the styles hit by a particular element, in the Chrome Developer Tools, go to the computed tab and expand the property you're interested in. You'll get a full list of all the other rules that apply to that element with a link to each. From what you know about specificity and cascading, it should be clearer why the "winner" was chosen.