Priority algorithm when CSS rules are stacked

 

CSSRule priority is a concept that Web front-end developers must understand. There are four common methods to add styles.

• Inline style
• Embeded style
• External style
• User style

Inline styles are ugly. They move through HTML documents and twist together with HTML elements, causing a lot of trouble for front-end Web developers. They often appear like this:

<P style = "color: red;"> This is a paragraph. </p>

Embeded styles are more gentleman than inline styles. They are also hosted in HTML documents, but they are used to twist together with HTML elements. They often<Style>Element:

<Style type = "text/css" media = "screen">
P {
Color: red;
    }
</Style>

External style is a gender that does not want to stay with HTML, so it simply exists in the form of external files. We usually use<Link>Element or@ ImportStatement to import them to HTML.

<Link rel = "stylesheet" type = "text/css" href = "style.css" media = "screen"/>

We should try to use external style as much as possible. I think there are many reasons for this. As we all know, I will not repeat it.

Another user style is slightly different from the preceding three. If you use IE, you can find the place to add the User style under Tools-Internet Options-General-Appearance-Accessibility-user style sheet (forgive me for having no Internet Explorer in Chinese ).

Since we have so many ways to add styles, it is difficult to avoid style cascade. For example:

<P class = "intro" style = "color: red;"> This is a paragraph. </p>

While using the above inline style, we also use it in our external style:

P {
Color: yellow;
}

We even haveClass = "intro"Of<P>Elements applied:

P. intro {
Color: blue;
}

In this waySame attribute on the same elementColor, With multiple CSS rules specified value. This situation is called Cascading ). When the cascade occurs, CSS Parser determines the final value based on the priority algorithm.