Home > Developer > Web Develop
First, let's declare the three main features of CSS-inheritance, precedence, and cascading. Inheritance is the subclass element that inherits the style of the parent class, such as the CSS styles that begin with F, such as font-size,font-weight, and the styles that begin with T, such as text-align,text-indent, and the color we use. 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><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>. Fonts{font-size:20px; } </style></Head><Body> <Divclass= "Fonts"> <PID= "P">My font size is 20px</P> <H1ID= "H1">My font size is 40px</H1> </Div></Body></HTML>
I give P and H1 tag of the parent element Div set a font-size for 20px,p no problem, inherit the div 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 Div set 20px, so by inheriting H1 final font-size is 20*2=40px, want to make H1 label font size also equals parent tag Div, just set h1 {font-size:100%;} As shown in the following:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>. Fonts{font-size:20px; }H1{font-size:100%; } </style></Head><Body> <Divclass= "Fonts"> <PID= "P">My font size is 20px</P> <H1ID= "H1">My font size is 20px</H1> </Div></Body></HTML>
Let's talk about the priority stuff.
!important > inline style >id selector > class selector > tags > wildcards > Inheritance > Browser Default Properties
Well, 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 div complex box, the innermost div 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 property.
CSS three major features (inheritance, precedence, cascading) of personal insights
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
