How does CSS work (repeating tags, which style does the browser choose?) ）

For example, the label p, may be in the embedded style sheet, the external style sheet is set more than once the value of the relevant property (such as Color:red;/color:blue), then the browser exactly what value to display the style of P??? That's how CSS works. (where the specificity is more important)

CSS has 3 working mechanisms: 1. Inheritance 2. Cascade 3. Specifically (where cascading principles are based on inheritance and specificity)

1. Inheritance: The ancestor elements in the CSS pass the same thing to the descendants: the value of the CSS property. The body is the ancestor of all elements, and if we specify body{color:red, then all elements in the document inherit this style. That's why, after we wrote a line in the Notepad program, Renamed to: Xxx.html, when opened in different browsers, there will be different font effects, because each browser has its own predefined style sheet, including the body of the font properties, and we use the browser to open our HTML, we inherited this property.

Of course, not all attributes can be inherited, and the attributes that can be inherited are mostly related to text, such as color, font, size, and so on. Some attributes, which are inherited without meaning, or inherited will affect the layout of the page, such as the element positioning, Margin,padding,border and other attributes.

2. Cascade: That is, the C (cascading) in CSS, mainly by the style source and the degree of specificity to cascade.

A) style source: The following is the order in which the browser stacks each source style:

1. Browser Default Style sheet
2. User style sheets (such as users with visual impairments, add a body{font-size:200%})
3. Developer external style sheets (in order of introduction to the page)
4. Developer Embed style sheet
5. Developer in-line style sheet
6. Note: The order of 3 4 is to look at the position of the <style> embed style label, and the location of the <link> tab, after the label is selected, see Example 2

The higher the priority, the better the browser will prefer the style set by the source (if present)

b) Degree of specificity: is the scoring rule for selectors, and a high selector will be selected. The formula has 3 values that need to be computed: I-C-E, the rules are as follows

1. There is an ID selector in the selector, plus 1 on I
2. There is a class selector in the selector, plus 1 on C
3. There is a label name in the selector, plus 1 on E
4. Get a 3-digit number
5. First compare high, high height is higher, for example, 1-0-0 is higher than 0-12-0, priority choice. And so on, if the special system is the same, the post-declared style is selected.

Selector, also known as the selector, English should be selector,css there are a lot of selectors, here is unknown to talk about.

Give an example of the degree of specificity:

P	0-0-1 specificity degree =1
P.classp1	0-1-1 specificity is 11
P#idp1	1-0-1 specificity is 101
Body P#IDP1	1-0-2 specificity is 102
Body P#IDP1 UL.CLASSUL1	1-1-3 specificity is 113
Body P#idp1 Ul.classul1 Li	1-1-4 specificity is 114

based on 3 kinds of working mechanism, summarize 3 rules, apply all cases.

1) The ID selector is larger than the class selector, and the class selector is larger than the tag Selector. Bottom line: A selector with a higher specificity (more explicit selection) is selected.

2) The browser reads each style sheet in the order of the HTML document, and the following style sheet overrides the style of the same property of the previous style sheet. You cannot overwrite the previous style if the following style is less specified

Note: Rule 1 is stronger than Rule 2, and if specified, it will be selected wherever it is (except in the row). The highest priority in the line (but the style in the line is generally not used, <p style= "" >), followed by the degree of specificity.

3) The style that is set is better than the inherited style

Example 1:id selector better than class selector
<style>. li1{color:red;}
#li1 {color:yelow;}</style><link rel="stylesheet"href="Demo.css">"Div1"> <ulclass="UL1"> <li id="Li1" class="Li1"> list Items 1</li> </ul> </div>List 1 is yellow

 Example 2 : Embedded style sheet and external style sheet, whichever (mainly see the browser in order, after reading will overwrite the point read before), the same degree of specificity when
<Linkrel= "stylesheet"href= "Demo.css"><style>. Li1{Color:Red;}</style></Head><Body>    <DivID= "Div1">        <ulclass= "UL1">            <LiID= "Li1"class= "Li1">List Item 1</Li>

(yellow) External style sheet
Demo.css

. li1{
Color:yellow;}

<style> embed the style sheet after it is red.

If this is the order, the style tag is in front, link is behind

<style>
. li1{color:red;}
</style>
<link rel= "stylesheet" href= "Demo.css" >

to Yellow

Example 3: Select a high degree of specificity (such as in order, should choose link yellow, but the style of the specificity of 1-0-2 is greater than 1-0-1, so the choice of high-specificity red), the subsequent reading of the lower specificity will not cover the above-specified degree of high.
<style>Body Div #li1{Color:Red;}</style><Linkrel= "stylesheet"href= "Demo.css"></Head><Body>    <DivID= "Div1">        <ulclass= "UL1">            <LiID= "Li1"class= "Li1">List Item 1</Li>

Demo.css

Div #li1 {
Color:yellow;}

to Red

Example 4: Inline style has the highest priority, the previous code does not change, only a style blue is added to P, and the list item turns blue immediately
Although there is the highest priority in the line, the inline style itself is not used (inconvenient to transplant, increase the size of the page)
<id= "Li1"  class= "Li1"  style= "color:blue;" > list items 1</li>

Example 5: The style that is set is better than the inherited style, even if the inherited style is especially high (adding Em,em in Li inherits the specificity of Li 102,em is 001, but still selected EM)
<style>Body Div #li1{Color:Red;}em{Color:Black;}</style></Head><Body>    <DivID= "Div1">        <ulclass= "UL1">            <LiID= "Li1"class= "Li1"><em>List Item 1</em></Li>            </ul>
The list item is black. 

How does CSS work (repeating tags, which style does the browser choose?) ）