Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of css style priority knowledge points. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

First, "carry"

The "load" here is the carrier, that is, the style sheet. For developers, there are only one "load" that is often involved, and there are two more. What are they? The details are as follows:

1. Client stylesheet: this is the default stylesheet of the browser. Only by abiding by its rules, the original attribute of div is "display:block" and span is "display:inline".

2. User stylesheet: a stylesheet defined by the person who uses the browser. You may not understand, but the fact is that you can do it, the specific setting method, I take firefox as an example, the steps are as follows: (1) menu bar "help"-> troubleshooting information-- > application basis-- > open the folder-> chrome; (2) create a CSS file named userContent.css, edit and add the desired style, save. Note that the name must be userContent.css and cannot be changed. Otherwise, it is invalid; (3) restart firefox. Taking the "Hot discussion" on the home page of w3cfuns as an example, I set its style, and the results are as follows:

The original effect is as follows:

Through the above aspects, we can automatically change the way the website is presented.

3. Author stylesheet: this is what we are most familiar with, that is, the stylesheet written by developers. The stylesheet that we often talk about actually stays at this level, because it is most intimate with us!

Second, "bit"

The reason why the "bit" is put on the second point, there are the following considerations: (1) "bit" refers to two points: the location of the style declaration and the location of the stylesheet link; (2) whether it is the location of the style declaration or the location of the stylesheet link, are specific to the developer, that is, the third point in the "load", so you must first say "load".

Having stated the reason clearly, the following is specific to the "bit". Just like the first point in the reason, I will start from two points:

1, the location of the style declaration: there are four ways to declare the style, except @ import and another (almost never used, so that I forget the name), there are two common ones: in-line and outreach, in-line with style tags and link tags for outreach. At this point, excluding the interference of style styles (mentioned in point 4), the style priority follows the principle of coming from behind, that is, the styles declared later in the stylesheet take precedence over the previously declared styles. For example, in the style.css file, the style is declared on the first line:

The code is as follows:

P {color:#f00;}

The style is declared on the third line:

The code is as follows:

P {color:#000;}

In the end, the font color of p is black.

2, the location of the stylesheet link: the same style may be declared in two stylesheets, and the same html page may call the two stylesheets at the same time, at this time, the priority of the style can still be based on the principle of coming from behind, but the objects that come from behind at this time are different. For example, in a html page, the head code is as follows:

The code is as follows:

At this point, if you declare this style in firstStyle.css:

The code is as follows:

P {color:#f00;}

The style is declared in secondStyle.css:

The code is as follows:

P {color:#000;}

In the end, the font color of p is black. It depends on the style sheet that is linked later.

Third, "important"

"important" is an important meaning, and after adding an exclamation point, it is the most important. Therefore, the general style declaration is like a Kunpeng on a carefree trip, and finally can only "sigh at the ocean". But from load, we will think, if the important style is declared in the user stylesheet and the important style is declared in the author stylesheet, then who has the highest priority?

So the explanation of "bit" in the second point seems to have some limitations. Starting from "load", combined with important, priority comparison can be extended to the following five points:

1. The style declared by the client

2. None! user style of important

3. None! author style of important

4. Add! the author style of important

5. Add the user style of important

Sort in ascending order. That is, the style of point 5 is higher than point 4, and so on. It should be said that adding important is the highest level for developers, and later styles can no longer replace it, which is why you should avoid using important in styles as much as possible. Because once important is declared, the highest style level, the core mechanism of css, cascading, loses its meaning. It is necessary to pay attention to this point.

4. "Special"

In my description of the "bit", I skimmed the style tag and went straight to a point of view, that is, the principle of catching up from behind, and gave the example of the p tag. In fact, for experienced front-end staff, the example I gave is not "decent", because not many people will be bored to declare the style of two p elements in the same stylesheet to replace the previous one. In fact, I just want to explain that principle. Well, let's give another example to illustrate the point of "special". Start with a piece of html code:

The code is as follows:

Happy

The following styles are written into a stylesheet named style.css:

The code is as follows:

# firstDiv # secondDiv # pElem {color:red;}

# firstDiv # secondDiv .pElem {color:yellow;}

# firstDiv .pElem {color:blue;}

# firstDiv p {color:gray;}

For what you see, you will find that the font color of p is black; when you delete the style tag style, the font color of p is red; then delete the first row of the stylesheet, which is yellow, so it is blue and gray.

This characteristic of css is called "particularity" comparison, and there is a set of established ways of comparison, which can be represented by the four-letter band of "a-recorder", "b-recorder", "c-recorder d". A refers to having style tags, b refers to ID selector, c refers to class selector and pseudo-class, and d refers to element selector and pseudo-element.

The way they are compared is: when an is the same, b is the same, b is the same, c is the same, d is the same, and they are all the same.

In view of the above example. Because there is style in p, that is, an exists, so it has the highest priority, so the font color of p is black. When you delete that style,a does not exist, consider the ID selector, the first css declaration has three ID, more than the rest, so it is the final style; and so on.

This is the end of the article on "sample Analysis of priority knowledge points of css style". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.