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

This article mainly shows you the "sample Analysis of Web css priority", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and learn the article "sample Analysis of Web css priority".

Before we talk about CSS priorities, we need to understand what CSS,CSS is and what it is used for.

First of all, let's make a simple explanation of CSS: CSS is short for cascading style sheets (Cascading Style Sheets). Its specification represents a unique stage of development in the history of the Internet. Now for friends engaged in web page production, it should be rare not to have heard of CSS, because we often need to use it in the process of making web pages.

Secondly: we can set a rich and easy-to-modify appearance for documents through CSS, so as to reduce the burden of web page makers, thus reducing the cost of production and post-maintenance.

In fact, now still talk about what CSS is, what is the role of CSS is completely superfluous, I believe that friends engaged in web page production have been more or less contact.

What is the CSS priority?

The so-called CSS priority refers to the order in which CSS styles are parsed in the browser.

II. CSS priority rules

Since the style has priority, there will be a rule to specify this priority, and this "rule" is the focus of this time.

The particularity in the stylesheet describes the relative weights of different rules, and its basic rules are:

Count the number of ID attributes in the selector.

Count the number of CLASS attributes in the selector.

Count the number of HTML tag names in the selector.

Finally, write three numbers in the correct order, without spaces or commas, to get a three-digit number (css2.1 is represented by four digits). Note that you need to convert the number to a larger number that ends with three numbers. The final number list corresponding to the selector can easily determine that the higher number characteristic overrides the lower number.

For example:

For each ID selector (# someid), add 0mem1j0j0p0.

Each class selector (.someclass), each attribute selector (such as [attr=value], etc.), each pseudo-class (such as: hover, etc.) plus 0mem0mem1mem0.

Each element or pseudo-element (: firstchild), etc., add 0jol 0j0pl 1.

Other selectors include the global selector *, plus zero. It's equivalent to not adding, but it's also a kind of specificity, which will be explained later.

III. List of selectors for feature classification

The following is a list of selectors classified by property:

Select the attribute value H2 {color:blue;} 1p em {color:purple;} 2.apple {color:red;} 10p.bright {color:yellow;} 11p.bright em.dark {color:brown;} 22#id316 {color:yellow} 100

Judging from the table above, it seems not easy to understand. Here is another table:

Select the attribute value H2 {color:blue;} 1p em {color:purple;} 1+1=2.apple {color:red;} 10p.bright {color:yellow;} 1+10=11p.bright em.dark {color:brown;} 1+10+1+10=22#id316 {color:yellow} 100

From the above, you can simply see that the weight of the HTML tag is 1, the weight of the class is 10, the weight of the ID is 100, and the weight of inheritance is 0 (we'll talk about it later).

The numeric strings are added bit by bit according to these rules, and the final weight is obtained, and then compared bit by bit from left to right when comparing the trade-offs.

Priority problem is actually a conflict resolution problem. When the same element (content) is selected by CSS selector, it is necessary to choose different CSS rules according to priority, which involves a lot of problems.

Speaking of which, we have to talk about the inheritance of CSS.

Multiple css style files are loaded in the web page, one of which is the style file that comes with the Ext library, which defines some styles for all the tags, resulting in incorrect display of the original web page. The correct style is reset by finding the corresponding style. The new style is added to the body tag, but two styles appear, and the Ext style is still valid. Finally, it is found that there is no * when setting the new style, which is only useful for body tags, but not for child tags. The following is the modified style

The code is as follows:

.diy

.diy * {

Box-sizing: content-box

-moz-box-sizing: content-box

-webkit-box-sizing: content-box

}

When multiple styles are defined for a tag and there is a conflict between styles, the priority is "style defined for ID" > "style defined for Class" > "style defined for label Type". For example, the following styles

The code is as follows:

Div {

Border:2px solid # 0000FF

}

.powerHeader {

Border:2px solid # 00ff00

}

# navigation {

Border:2px solid # ff0000

}

In the tag, the # navigation is applied first, the .powerHeader style is applied when the # navigation does not exist, and finally the div style is applied.

At the same time, when there is a conflict between multiple tag classes class defined using link or style alone, the last class defined will be applied.

Understanding the priority of css styles can avoid many style conflicts in web development.

The above is all the content of the article "sample Analysis of Web css priority". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.