This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

CSS cascade

Cascading is a fundamental feature of CSS and defines algorithms for merging property values from multiple sources.

Scope of participation in CSS cascading: Only attribute name-value pairs participate in CSS cascading. @ rules that contain entities other than CSS declarations do not participate in cascading calculations (e.g., @font-face, @key-frame), but rather participate in cascading calculations as a whole. Most CSS declarations for the @ rule participate in cascading computation, such as the @media, @Documents, and @supports CSS declarations.

Note: @import and @charset follow specific algorithms and are not affected by cascading algorithms.

CSS declaration source:

  • User agent style. The browser will have a basic style sheet to set the default style for any web page. To reduce development costs and reduce the base environment required for stylesheets to run, web developers often use a CSS RESET stylesheet to force common attribute values to a deterministic state.
  • The author of a web page can define the style of the document, which is the most common style sheet.
  • The reader, as a user of the browser, can customize the experience with custom stylesheets.

The scope of the CSS styles from these sources is the same, and the cascading algorithm defines how the styles interact.

Cascading order:

  1. Filter all rules from different sources and preserve those to be applied to the specified element.

  2. Rank these rules in order of importance. (stacked in ascending order)

    1. The generic style of the user agent
    2. The user’s normal style
    3. A generic style for the page author
    4. CSS animations
    5. Page author’s! important
    6. The user’s! important
    7. user-agent! important
    8. CSS Transitions

  3. If the cascade order is equal, which value is used depends on the priority. The cascading algorithm is superior to the priority algorithm. For example, when the user’s CSS and the author’s CSS are selected on the same element, even if the user’s CSS has a higher selector priority than the author’s CSS, it will not be applied.

** Resetting styles: The **CSS property ALL allows you to quickly set (almost) all CSS properties to a known style. (After you have made changes to your CSS styles, you may want to revert them to a known style in some cases, such as animations, theme changes, etc.)

The All attribute allows you to immediately restore all attributes to their original (default) state, either inheriting their state from a previous cascading order, specifying a specific source (user agent, page author, or user), or even optionally clearing all attributes completely.

/* Global values */ all: initial Changes all attributes of the element or its parent to the initial value. All: Inherit Changes the values of all attributes of the element or its parent to the values of their parent attributes. All: unset Changes the values of all attributes of the element or its parent to their parent if the value of the attribute of the element is inheritable, or to the initial value if the value of the attribute of the element is inherited. /* CSS Cascading and Inheritance Level 4 */ all: revert; Specify behavior that depends on the origin of the style sheet to which the declaration belongs:Copy the code

CSS animation and Cascading:

CSS animations refer to animations between states defined with @KeyFrame. Keyframes do not cascade, which means that CSS takes a single @keyframes value at any one time rather than a combination of @KeyFrames.

When there are multiple keyframes that meet the criteria, the last keyframe defined in the most important document is selected, not combined.

Also note that values defined with the @keyframes @ rule will override all normal values, but will be overwritten by! Overriding the value of important.

priority

The browser uses priority to determine which attribute values are most relevant to an element and then applies them to that element. Priorities only make sense when there are multiple declarations for the same element. Because every CSS rule that directly applies to an element always takes over rules that the element inherits from its ancestors.

Selector type (increasing priority) :

  1. Type selectors and pseudo-elements. (e.g.,h1 、::before)
  2. Class selectors, property selectors, and pseudo classes. (e.g..example.[type="radio"].:hover))
  3. Id selector (for example,#example)
  4. Inline style of the element.style="font-weight:bold"
  • Wildcard selector*And relational selectors+.>.~.’<span> </span>‘andNo pseudo class:not()The priority is not affected. (However, in the:not()Internally declared selectors affect priority).
  • When the priority is equal to the priority of any of the CSS declarations, the last CSS declaration is applied to the element.

! important

When using a! The important rule overrides any other declarations. Technically, this is not a priority change, but a cascading order change.

Use! Important is a bad habit and should be avoided as much as possible because it breaks the cascading rules inherent in stylesheets. When two conflicting bands! When the declaration of the important rule is applied to the same element, the declaration with a higher priority will be adopted.

Rule of thumb:

  • A certainPrioritize using style rules to solve problems rather than! important
  • onlyUse in specific pages where you need to override site-wide or external CSS! important
  • Don’t everUse it in your plugin! important
  • Don’t everUsed in site-wide CSS code! important

When will it be available! important

  • Override inline styles. Write some in the global CSS file! importantTo override inline styles written directly on elements.
  • Override the selector with the highest priority.

How to cover! important

  • Let me write another strip! importantCSS rules, and give this selector a higher priority
  • Use the same selector, but place it after the existing style
  • Simply rewrite the original rules to avoid using them! important.