CSS selectors-common collection

Tag Selector:

div{

font-size=10px;

color=red;

Background-color=yello;

width=200px;

height=200px;

}

<div> front-end Martial </div>

---------------------------------------

Class selector:

. box{

}

<p class= ' box ' > Ah ah ah </p>

------------------------------------------

ID selector:

#box {

}

<p id= "box" > Ah ah <p>

-------------------------------------------

Wildcard Selector

*{

}

<div>aa</div>

<p>aaa</p>

---------------------------------

Composite selector: Two or more two selectors are connected in different ways.

div.box{//no spaces

color:red;

}

<div class= "box" > Hey </div>//the box in this div turns red

<p class= "box" >aaa<p>

<div>aaaaaa</div>

-------------------------------

Descendant selector: There is a space unlimited generational

Selector + space + selector ..... {

}

. Box san{

cocor:red;

}

<div class= "box" >

<p><span class= "Miss" >aa</span></p>

</div>

----------------------------------

Descendant selector:

div>span{

color;red;

}

<div>

<p><span></span></p>//Here's span is grandson here is P>span

<span></span>//Direct sub-label change that's it.

------------------------------------------------------------------------

The set selector:

div,p,span{

font-size:100px;

}

<div>aaa</div>

<p>aaa</p>

<span>aaaa</span>

------------------------------------

Selector Priority:

first, what is the CSS priority level
CSS precedence refers to the order in which CSS styles are parsed in the browser.
Second, CSS precedence rules
One of the more simple ways to remember is to assign different values to different selectors:
The 1.id selector has the highest default priority, with a weight of 100
The weights of the 2.class selector, the property selector, and the pseudo-class selector are 10
3. The label selector has a lower priority, with a weight value of 1
So when comparing the priority of a style, simply count the number of IDs, class, tag names in the selector and add the corresponding weights. Depending on the results, priority levels can be drawn.
1. Higher priority for results
2. The result is the same, the later defined style has higher precedence
3. If the style value contains!important, the value has the highest precedence

CSS selectors-common collection