Cascade

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.

參考

Previousglowing buttonsNextOrder

Last updated