tag chooser
Name through label , modify css style
div{ width: 200px; height: 300xp; }
Wildcard selector
* Select all elements in the page
* { margin: 0; padding: 0; }
First level child element selector
Select a direct child of a parent element
The descendant selector is all descendant elements that select the parent element , The first level child element principle only selects the first level child element , No more looking down for elements
.box > p { background-color: red; }
id selector
adopt id Find unique labels in a page , use # express id
#dada { width: 200px; height: 200px; }
class selector
Through specific class To find the corresponding label in the page
.box{ width: 200px; height: 300px; } <div class="box"></div>
Pseudo class selector
:hover Mouse over an element
.box:hover { color: red; }
:before Insert content in front of an element
div:before { content: '-dadaqianduan'; background-color: yellow; color: red; }
:afer Insert content after an element
div:after{ content: '-dadaqianduan'; color: red; }
Group selector
* You can set the same style for multiple different selectors .box, .box1, .box2 { width: 200px; height: 300px; }
Priority of selector
When there are different selectors to style the same object , When two selectors have the same property and are given different values .
By measuring the weight value of that selector, the highest value , Which selector style to apply
Weight calculation method
* tag chooser ：1
* class selector ：10
* id selector ：100
* Inline style ：1000
* !important highest level , Increase style weight , Have the highest level
be careful ：
If the weight values of the two selectors are the same high , Apply the closest css style
Technology
Daily Recommendation