Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleCSS Structure and Cascading


1. How is the priority of the selector calculated? 2. What is CSS inheritance? Which attributes can and cannot be inherited?Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Preface: in the previous “(02) CSS selectors, rounding | CSS”, our article talked about the “tree” structure from the start, also understand after all “selector” is built on the basis of the “tree” structure.

In this article, we will elaborate on the importance of “structure tree” for “inheritance”, “cascade” and so on.

Inheritance: Inheritance refers to the mechanism by which attribute values are passed from one element to its descendants in the structure tree.

(2) Cascade: Cascade is a “process” that the browser considers — when determining which values to apply to an element, the browser must consider not only “inheritance”, but also “particularity of the declaration”, and “the source of the declaration itself”.


1 particularity/specificity

“Specificity” is important to understand how declarations are applied to documents.

A rule is more “specific” if it chooses an element “more accurately”!

This “specificity” can be obtained through calculation. The larger the value is, the stronger the specificity is:

Such as:

h1 {
  color: red;
  background: yellow;
} /* specificity=0001 */

p.div {
  font-family: sans-serif;
} /* specificity=0002 */

#txa {
  width: 300px;
  height: 200px;
  margin-left: -12px;
} /* specificity=0100 */

.done {
  text-decoration: line-through;
} /* specificity=0010 */

li[class] {
  color: red;
  background: yellow;
} /* specificity=0011 */
Copy the code

❗️ note: the wildcard selector does not contribute to the specificity of a selector. Its “specificity = 0000” is all 0, but it does not mean that it does not have “specificity”. Instead, remember that zero specificity is better than nothing specificity.

❗️ Note: Sometimes a statement may be so important that it exceeds all others that it is preceded by a semicolon at the end of those statements! Important. Such as:

h1 {
  color: red;
  background: yellow ! important;
}
Copy the code


2 inheritance

Inheritance is one of the most basic things in CSS.

Inherited values are not “specific,” not even zero-specific. So we can always use a more “specific” selector to override properties that it inherits from the parent selector.

In general, all styles can be “inherited” if they affect the appearance of your text. For example: font color color, all properties related to font:

font-family
font-size
font-weight
font-style
Copy the code

❗️ Most box model attributes cannot be inherited (including margins, margins, backgrounds, and borders). For example, adding a border style to a element does not mean that we want all elements in the “body” to have borders.


3 layers

CSS: Cascading Style Sheets.

CSS is based on the idea of “cascading” all styles together through a combination of “inheritance” and “specificity.”

Cascading is a process that the browser considers when deciding which values to apply to an element. The browser considers not only inheritance, but also particularity of the declaration, and the origin of the declaration itself.

From the “browser” perspective, it takes the following steps to decide what style to apply: Step 1: Collect all the stylesheets;

  • These include: style sheets written by the author of the Web page, style sheets added by the reader, and default styles for the browser.

Step 2: Find all matching declarations;

Step 3: Sort all matching rules;

  • Sign!! The important rule is more important than none! Rule for the important flag.

  • Sort by source – creator, reader, browser for all declarations that use a given element. In general:

    • The style of the writer is better than that of the reader;
    • There are! importantThe reader style of the flag is stronger than all other styles (including! importantThe designer style of the logo);
    • Both the creator and reader styles are better than the browser default.

Step 4: Sort all statements by the “specific” calculated values described above;

Step 5: Sort all declarations using a given element in the order in which they appear.

  • The later a declaration appears in a stylesheet or document, the greater its weight;

  • If a stylesheet has imported stylesheets, it is generally assumed that declarations appearing in the imported stylesheet come first, followed by all declarations in the main stylesheet.


4. Answers to questions left over from the previous article

a:link {
  color: blue;
}

a:visited {
  color: red;
}

a:hover {
  color: orange;
}

a:active {
  color: black;
}
Copy the code

As mentioned in the previous article, we need to declare link styles in this order.

Through this study, we know the reason:

  • They all have the same weight, the same source;

  • All of these selectors have the same “specific” value: 0011;

  • Therefore, the last selector that matches the element in order wins.

That is:

  • First, under normal circumstances, A is “blue”;

  • Then, when I mouse over, :hover is below in the order, so it becomes “orange”;

  • Then, when I mouse down, it means that my mouse is over the element, so :link, :hover and :active all take effect, but according to the cascade rule, :active is at the bottom of the order, so it overwrites the above, so it becomes “black”.

  • Finally, after I clicked the link, when the mouse moved away, :link and :visited would take effect, and: Visited would overwrite :link and take effect permanently.


Postscript: this knowledge point is not much, belongs to the basic knowledge, need to be thoroughly familiar with the heart. The road is still very long, hope harvest on the road, happy on the road.

I wish you good, QdyWXS ♥ you!