05 Composite selector of css

Descendant selector (commonly important)

Descendant selectors are also called containment selectors, which can select child elements in the parent element, separated by commas
When the label is nested, the inner label becomes the descendant of the outer label

元素1 元素2 { 样式声明 }

The above grammar means to select all elements 2 in element 1

Element 2 can be a son or grandson, as long as it is a descendant of Element 1.
Element 1 and Element 2 can be any basic selector

Child selector (important)

The child selector can only be selected as the closest child element of an element. The simple understanding is to choose the pro-son element, which has nothing to do with grandson

元素1>元素2 { 样式声明 }

The above grammar means selecting the left and right direct descendants (child elements) element 2 in element 1.

Union selector

The union selector can select multiple sets of labels and define the same style for them at the same time . Usually used for collective declarations
When the union selector is connected, the selectors are connected by commas (,), and any form of selector can be used as part of the union selector

元素1,元素2 { 样式声明 }

The above syntax means selecting element 1 and element 2

Union selectors are generally written vertically

div,
p,
.pig {
  color: pink;
}

Pseudo-class selector

Pseudo-type selectors are used to add special effects to certain selectors, such as adding special effects to links, or selecting the first and nth elements

The biggest feature of pseudo-class selector writing is represented by a colon (:), such as: hover, :first-child

Link pseudo-class selector

a:link        /* 选择所有为被访问过的链接 */
a:visited    /* 选择所有已被访问过的链接 */
a:hover        /* 选择鼠标指针位于器上的链接 */
a:active    /* 选择活动链接(鼠标按下未弹起的链接) */

The normal link is: link color (just set a (), no need: link)

:focus pseudo-class selector

The :focus pseudo-class selector is used to select the form element that has the focus

The focus is the cursor , which <input>can only be obtained by form elements in general , so this selector is also mainly for form elements

input:focus {
    
    
    background-color: yellow;
}

Selector	effect	feature	Usage	Separation symbols and usage
Descendant selector	Used to select offspring	Can be descendants	More	Space.nav a
Child selector	Select the nearest element	Only choose your own son	less	Greater than .nav>a
Union selector	Select some elements of the same style	Can be used for collective declaration	More	Comma.nav.header
Link pseudo-class selector	Choose links in different states	Related to links	More	Focus on remembering a{} and a:hover{}
:focus selector	Select the form to get the cursor	Related to form	less	input:focus{}