What you have to know about CSS three big features

This time to bring you what you have to know about CSS three features, the use of CSS three characteristics of the attention to what, the following is the actual case, together to see.

CSS three main features: inheritance, cascade, priority

I. Inheritance

1. What is inheritance?

Role: To set some attributes to the parent element, which can also be used, which we call inheritance

Note the point:

1. Not all attributes can be inherited, only properties that start with <strong>color/font-/text-/line-</strong> can inherit

2. In the inheritance of CSS is not only the son can inherit, as long as the descendants can inherit

The particularity of 3.<strong> inheritance </strong>

The text color and underscore of the 3.1 a label cannot be inherited (<strong> that is, it cannot be obtained through inheritance </strong>)

The text size of the 3.2 h tag is not inherited (<strong> means that it cannot be inherited </strong>)

Application Scenarios:

Generally used to set some common information on the Web page, such as the text color of the Web page, font, text size and other content;
body{} >>> Common information in body

Two. Cascade Sex

1. What is cascading?

Role: Layering is the ability of CSS to handle conflicts

Note the point:

Cascading properties occur only if the same label is selected for multiple selectors, and then the same attribute is set.

CSS full name cascading StyleSheet (cascading style sheet)

Gca

<style>        p{            color:red;        }        . para{            color:blue;        } </style> <p id= "identity" class= "para" > I am a paragraph </p>

Three. Priority level

1. What is the priority level?

Function: When multiple selectors select the same label and set the same attribute to the same label, how the Cascade is determined by the priority level

2. Three ways to determine priority

2.1 Indirect selection means inheritance
If it is indirectly selected, then who is closer to the target tag to hear who

2.2 Same selector (directly selected)
If all are directly selected, and are all of the same type of selector, then who is written in the back to listen to WHO

2.3 Different selectors (directly selected)
If they are all directly selected and are not the same type of selector, they will cascade according to the priority of the selector:

id> classes > tags > wildcards > Inheritance > Browser default

id> > Standard > Pass > Relay >

Four.!important

1. What is!important

Function: The priority of a property in the selector of a directly selected tag can be promoted to the highest priority of the specified property

Note the point:

1.!important can only be used for direct selection, <strong> cannot be used for indirect selection </strong>

2. The label selected by the wildcard selector is also directly selected, or you can use!important to elevate the priority

3.!important can only elevate the priority of the property being specified, and the priority of other attributes will not be promoted

4.!important must be written in front of the attribute worth semicolon

The exclamation point in front of 5.!important cannot be omitted

<style>      p{         color:red!important;//Promotion priority to highest         font-size:30px;//No Elevation of priority (explained above 3rd)       }  < /style>

Five. Weight of priority

1. What are the priority weights?

Function: When multiple selectors are mixed together, we can calculate the weights to determine who has the highest priority

2. Calculation rules for weights

2.1 First calculate how many IDs are in the selector, and the selectors with the ID number have the highest precedence

2.2 If the number of IDs is the same, then look at the number of class names, the number of class names is the highest priority

2.3 If the number of class names is the same, then look at the number of label names, the number of label names is the highest priority

2.4 If the number of IDs is the same, the number of class names is the same, the number of label names is the same, then will not continue to calculate, then who wrote in the back to listen to WHO
In other words, if the priority is the same, then who writes in the back who listens to

Note the point:

1). Only the selector is a direct check of the label only need to calculate the weight, otherwise you will listen to the directly selected selector;

2). The wildcard has a weight of 0

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

IOS WebView How to load htmlstring

HTML5 a little knowledge that is easy to overlook