Cascade

• 📘 Default CSS Values for HTML Elements

cascade algorithm

• Order:

  • given the same specificity, later styles override earlier styles.

• Specificity:

  • inline > #id > .class|[attr]|:pseudo-class > <tag>|::pseudo-element

  • The universal selector (*) and combinators (>, +, ~) have no effect on specificity.

  • A common way to indicate specificity is in a number form, for example, “1, 2, 2” indicates a specificity of one ID, two classes, and two tags.

• Origin: (from least specific to most)

  • user agent styles (browser)

  • local user styles (OS/browser extensions)

  • author styles (web page CSS)

  • author styles with !important

  • local user styles with !important

  • user agent styles with !important

• Importance: transition > !important > animation > normal

• Inheritance

  • If an element has no cascaded value for a given property, it may inherit one from an ancestor element.

key points

• Declaring the same property twice is a way to create fallbacks for browsers that do not support a particular value.

• If you add a declaration to CSS and have no effect, often it’s because a more specific rule is overriding it.

• A declaration that “wins” the cascade is called a cascaded value.

參考

🌎 文章

• The CSS Cascade

📗 書籍

• CSS in Depth, Ch. 1