Selector precedence for CSS and parent-child selectors

CSS, also known as style overlap table, today's web page style is basically div+css written out, the function is very powerful, want to introduce a CSS file in the HTML file need to enter a line in the

Some basic CSS styles are not introduced, this in the manual and some of the learning site will have, you can check their own;

There are four different types of selectors in CSS: 1. Class selector, 2.id selector, 3.html element selector, 4. Wildcard selector;

Use of the 1.class selector:

.    class selector name {///class selector in front of. Be sure to add

Property Name: property value;

...

}

Use of the 2.id selector:

# ID Selector name {//In the style sheet, the ID selector has the highest precedence

Property Name: property value;

...

}

3.html element selector:

HTML tag name {//eg:a{} img{} body{} and so on

Property Name: attribute value;//When you define an HTML element selector, all the styles of that element will change

...

}

Classification can also be handled in the same HTML element selector

The name of the HTML tag. Class Name {//eg:a. cls1 {A. cls2 {

Property Name: Property value; Property Name: property value; Property Name: property value;

...　　　　　　　　　　　 　　　　...　　　　　　　　　　　　...

}　　　　　　　　　　　　　 　　}　　　　　　　　　　　　　}

/* Apply to Page <a class= "CLS1" > This will render the A.CLS1 style

<a class= "CLS2" > This will render the A.CLS2 style */

4. Wildcard selector:

* {//Wildcard selectors are used for all styles, most of which are used to define the initialization of all internal and external margins, but with the lowest priority

Property Name: Property value;//usually some experienced web front-end engineers habitually zeroed out margins

...//margin:0px; padding:0px;

}

Priority of four selectors: ID selector > class selector > HTML element selector > wildcard selector;

Parent-Child selector://eg: <span= "id" > I <span> here </span> there <span> a section of </span> code & Lt;/span>

# ID {//"I", "have", "code" will render this style

Property Name: property value;

}

# ID span{//"<span> here </span>" will render this style

Property Name: property value;

}

# ID span span {//"<span> section </span>" will render this style

Property Name: property value;

}

Parent-Child Selector Summary: There can be multiple tiers in a parent-child selector (but not more than three layers in real-world development),

Parent-child selectors have strict hierarchical relationships;

Any type of selector can have a parent-child selector;

Multiple CSS files can be referenced to each other, using the @import URL ("introduced path and file name") directive introduced;

Selector precedence for CSS and parent-child selectors