CSS Common Selector

"CSS Common selector"

Tag Selector
Syntax: HTML tag name {}
Role: You can select all HTML tags that have the same name as the selector in the page.

li{
color:red;
font-size:24px;
}

class selector (classes selector)
Syntax:. Class Name {}
Call: Use class= "class name" to invoke selector on a label that needs to invoke a selector style
Priority: > Tag Selector

. first{
Color:blue;
}


ID Selector
notation: #ID名 {}
Call: A tag that needs to call a style, starting with a id= "ID name"
Priority: ID Selector >class Selector
Note: The same ID cannot appear on a page

#one {
Background-color:yellow;
Color:green;
}

【the difference between the class selector and the ID selector】
1. Different wording: class selector. Declaration, ID Selector # declaration;
2. Different priority: ID selector >class Selector
3, the scope of the different: class selector can be called multiple times, the ID selector can only be used once.


【naming conventions for selectors】
1, can only have letters, numbers, underscores, minus the composition;
2, the beginning can not be a number. It can't be just a minus sign.

In general, naming requires semantics, using English words and numbers.



Universal Selector
notation: *{}
Function: You can select all the HTML tags in the page.
Priority: Lowest!!!

*{
Color:orange;
}


and set selector
notation: selector 1, selector 2,......, selector n{}
Effective rules: Multiple selectors take the set, as long as the label satisfies any one of the selectors, the style can take effect.

li,.first{
color:red;
}

intersection selector
Wording: Selector 1 selector 2 ... Selector n{} All selectors are next to each other, no separation
Effective rule: Multiple selectors intersect, you must meet the requirements of all selectors in order to take effect

li.first{
color:red;
}

descendant Selector
Wording: Selector 1 selector 2 ... Selector n{} selectors space-delimited
Effective rule: As long as satisfied, the latter selector is the descendant of the previous selector, can be effective. (descendants include descendants, grandchildren, great-grandchild ...) ）

Popular speaking: As long as the latter a selector, in the previous selector can be.

Div span{
}

descendant Selector
notation: selector 1> selector 2>......> selector n{} selector with > delimited
Effective rule: must be satisfied, the latter selector is a direct descendant of the previous selector, in order to take effect. (No labels can be spaced in the middle)

div>span{
color:orangered;
}

CSS Common Selector