CSS priority and inheritance

Before talking about CSS priorities, we need to know what CSS is and what CSS is used.

First, we will give a simple description of CSS: CSS is short for Cascading Style Sheet. Its specifications represent a unique stage of development in the history of the Internet. For those who are engaged in creating web pages, we should have never heard of CSS, because we often need to use it in the process of creating web pages.

Second, we can use CSS to set a rich and easy-to-Modify appearance for documents, so as to reduce the workload of Web Page makers and the cost of production and post-maintenance.

As a matter of fact, I still want to talk about what CSS is, and what effect CSS has is totally redundant. I believe that all the friends who are engaged in creating web pages have been more or less touched.

Let's get to the point where we start today:

　　1. 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 a priority, there will be a rule to specify this priority, and this "rule" is the focus of this article.

The particularity in the style sheet describes the relative weights of different rules. Its basic rules are:
1. count the number of ID attributes in the selector.
2. count the number of CLASS attributes in the selector.
3. count the number of HTML tag names in the selected operator.

Finally, write three numbers in the correct order. Do not add spaces or commas to get a three-digit number (css2.1 is represented by four digits ). (Note: You need to convert a number into a larger number ending with three digits ). The final number list corresponding to the selector can easily determine that a higher number is superior to a lower number.

For example:
1. Select the identifier (# someid) for each ID, and add 0, 1, 0, and 0.
2. each class selector (. someclass), each attribute selector (such as [attr = value]), and each pseudo class (such as hover) plus 0, 0, and 0.
3. Add 0, 0, and 0 to each element or pseudo element (firstchild.
4. Other delimiters include the Global delimiters *, plus 0, 0, and 0. This is equivalent to not being added, but it is also a specificity, which will be explained later.

3. Feature Classification selector list

The following is a list of feature-specific delimiters:

Selector	Feature value
H1 {color: blue ;}	1
P em {color: purple ;}	2
. Apple {color: red ;}	10
P. bright {color: yellow ;}	11
P. bright em. dark {color: brown ;}	22
# Id316 {color: yellow}	100

From the above table alone, it seems that it is not easy to understand. Here is another table:

Selector	Feature value
H1 {color: blue ;}	1
P em {color: purple ;}	1 + 1 = 2
. Apple {color: red ;}	10
P. bright {color: yellow ;}	1 + 10 = 11
P. bright em. dark {color: brown ;}	1 + 10 + 1 + 10 = 22
# Id316 {color: yellow}	100

From the above, we can easily 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 inherited weight is 0 (will be discussed later ).

According to these rules, the number strings are added by bit to obtain the final weight, and then compared by bit in the order from left to right during comparison.

The priority problem is actually a problem solved by a conflict. When the same element (content) is selected by the CSS selector, CSS rules with different priorities should be selected, this involves a lot of problems.

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

Iv. Inheritance of CSS

　　4.1 inheritance Performance

Inheritance is a major feature of CSS. It depends on the relationship between ancestor and descendant. Inheritance is a mechanism that allows a style to be applied not only to a specific element, but also to its descendants. For example, the color value defined by a BODY is also applied to the text of a paragraph.

Style definition:Body {color: # f00 ;}
Example code:<P> CSS <strong> inheritance </strong> test </p>
Example:

The application result of this Code section is: the "CSS inheritance test" section is red, and the word "inheritance" is bold because the <strong> label is applied. Obviously, this section inherits the color defined by the body {color: # f00;} style. That is why inheritance is part of CSS.

However, the weight of CSS inheritance is very low, and it is 0 lower than that of common elements.

The preceding sample code is used as an example: add strong {color: #000 ;} to the style definition ;}.

Example:

You only need to add a color value to <strong> to overwrite the style color inherited from <body>. It can be seen that any display declaration rule can overwrite its inheritance style.

　　4.2 limitations of Inheritance

Inheritance is an important part of CSS. We don't even have to consider why it works like this, But CSS inheritance is also limited.

Some attributes cannot be inherited, such as border, margin, padding, and background.

Style definition:Div {border: 1px solid #000 ;}
Example code:<Div> I am <em> border </em>. I cannot be inherited. </div>
Expected results:
Actual results:

From the above results, we can see that border cannot be inherited, and there are some other attributes, so we will not list them here.

　　5. Additional instructions

1. The style priority in the text is 1, 0, 0, so it is always higher than the external definition. Here, the style finger is shown in <div style = "color: red"> blah </div>, external definitions refer to rules defined by <link> or <style> volume labels.
2. Yes! Important declares more rules than anything else.
3. If! If important declares a conflict, the priority is compared.
4. If the priority is the same, it is determined by the order in which the source code appears.
5. The inherited style does not have the specificity calculation. It is lower than all other rules (such as rules defined by the global selector ).
6. for external styles loaded by @ import, because @ import must appear before all other rule definitions (if not, the browser should ignore it), follow the principle of "post-import, generally, priority conflicts take a disadvantage.

It should also be noted that IE can identify @ import with incorrect location, but it is considered to be located before all other rule Definitions No matter where @ import is located, this may cause some misunderstandings.

The priority issue looks simple, but there is still a very complex mechanism behind it. You need to pay more attention to it in practical applications.

　　6. Exercise

After reading the above text, I will do a few simple questions. (Do not look at the link addresses provided by each question before you finish your answers.)

1. How to make two elements with the same style name have different effects: css priority Testing
Fixed effect:
Fixed code:<Div class = "test"> legendary test </div>
<P class = "test"> legendary test </p>

2. How to Make Fixed effect:
Fixed code:<H3> discuss <em> CSS </em> priority <P> discuss <em> CSS </em> priority </p>

3. How to Write an external style so that the color of

4. How to Make elements with a. a and. B style show only the. a Color Style: css priority Test
Fixed code:<P class = "a B"> legendary drop test </p>

We will talk about the style priority today.