What are the features of CSS? Analysis of CSS three features (inheritance, precedence, and cascading)

What is the CSS feature? the three attributes of CSS are: inheritance, precedence, and cascading. So. Let's look at the details of the inheritance, precedence, and cascading three features in CSS.

Inherited

Inheritance that is, the subclass element inherits the style of the parent class, such as the CSS style that begins with F, such as font-size,font-weight, and the styles that begin with T, such as text-align,text-indent and our favorite color. Simply do not demonstrate, emphasize font-size this east (although there are inheritance, but the effect of different inheritance of the tag is not the same), such as the following code:

<! DOCTYPE html>
Operation Result:


I give div and H1 tag of the parent element P set a font-size for 20px,p no problem, inherit the P 20px, but H1 has become 40px, we can get from the following JS code.


Why would H1 be 40px? Because the default style for H1 is 2em (32px), such as

，

and H1 default font-size is 200%, because P is set to 20px, so through the inheritance H1 the final font-size for 20*2=40px, to make the H1 label font size is also equal to the parent label p, just set H1 {font-size:100%;}, As shown in the following:

<! DOCTYPE html>

Operation Result:


CSS Precedence

!important > inline style >id selector > class selector > tags > wildcards > Inheritance > Browser Default Properties

It seems a little complicated. Let's prove it by following a few examples.

Method--First look at whether the selector hit the corresponding label, hit after the weight to judge, the weight of the meaning of the number of labels, by comparing the number of ID class label three selectors to determine who has the highest priority. When the quantity is the same, it is determined by cascading (the latter covering the former).


The final display is green, because although the!important has the highest priority, but no inheritance, Li's color inherits from UL.


The answer is yellow, because all three can hit the element, so through the weight judgment, the first no ID selector pass off, the second and the third, through the Cascade (third cover second) to determine the color.


HTML is a nested 12 p complex box, the innermost p has me this class, the Judgment method: All can hit the element, so through the weight, class selector > element selector, so choose Blue.


can hit the corresponding element, the weight of the first greater than the second (the number of comparison tag selectors), display blue.


The first is to exclude the fourth and fifth styles by hitting the corresponding element, and then compare 123--The first: two IDs--for the second: one ID, one class, and a third: two classes. So according to the weight id> class, finally show Blue.


The answer is blue, the second one without a hit pass, the first and third weights, because the first one has no class, so the answer is blue.

Finally, we summarize the relationship between priority, cascade and weight--

Cascading is a feature of CSS, and if two of the same attributes work on the same tag, they will cascade. If more than one composite selector, at the same time acting on our same label, the priority is not good calculation, it is necessary to calculate the weight, by comparing the weights, to first out the highest priority selector.

How to calculate weights:

(Number of tags) number of first ID, if the ID is equal again number class if the ID is not equal ID more than the selector weight high, the higher the weight, the higher the priority. If the number of ID selectors is the same, then the number of class selector, the last number of labels.

Note: when comparing weights, be sure to note that our selector must hit the corresponding tag before it can have the corresponding attribute.