A composite selector is a selector composed of two or more basic selectors. Commonly used composite selectors are: descendant selectors, sub-selectors, union selectors, and pseudo-class selectors.
1. Descendant selector : also known as a containing selector, which can select child elements within the parent element.
Syntax:
父标签名 子标签名 {
属性1： 属性值；
.....
}
2. Child selector : Only the child element of the nearest level of an element can be selected.
grammar:
元素1 > 元素2 {
样式申明
}
Note : The child selector will only select the direct children of the parent element and not the indirect children. Such as:
ol>a {
color: red;
}
<ol>
<a href="#">儿子1</a>
<a href="#">儿子2</a>
<li>
<a href="#">孙子</a>
</li>
</ol>
Here only son 1 and son 2 turn red, and grandson does not change color.
3. Union selector : change a type of label to the same style. Any element can be added to the union selector.
grammar:
元素1，
元素2，
...
元素n {
样式申明
}
4. Pseudo-type selector : used to add effects to some selectors, such as the color change of the link text when the link is clicked
Common pseudo-class selector
a. Link pseudo-class selector
a:link{
样式申明
}
//当链接还未被访问时会显示link内定义的样式
a:visited {
样式申明
}
//当链接被访问后会变成visited内定义的样式
a:hover{
样式申明
}
//当鼠标放在链接上时会显示hover内定义的样式
a:active{
样式申明
}
//当鼠标点击并且未松开时会显示active内定义的样式
Note: If all four link selectors are needed during development, please write in the order of LVHA
b.focus pseudo-class selector: used to select the form element to obtain the cursor . Syntax:
input:focus {
样式申明
}
//当光标点击到相应的input框的时候，input框会显示focus内定义的样式，
当光标离开后恢复原状
