Un selector compuesto es un selector compuesto por dos o más selectores básicos.Los selectores compuestos comúnmente utilizados son: selectores descendientes, sub-selectores, selectores de unión y selectores de pseudo-clases.
1. Selector descendiente : también conocido como selector contenedor, que puede seleccionar elementos secundarios dentro del elemento principal.
Sintaxis:
父标签名 子标签名 {
属性1： 属性值；
.....
}
2. Selector secundario: solo se puede seleccionar el elemento secundario del nivel más cercano de un elemento.
gramática:
元素1 > 元素2 {
样式申明
}
Nota : El selector de hijos solo seleccionará los hijos directos del elemento principal y no los hijos indirectos. Como:
ol>a {
color: red;
}
<ol>
<a href="#">儿子1</a>
<a href="#">儿子2</a>
<li>
<a href="#">孙子</a>
</li>
</ol>
Aquí solo el hijo 1 y el hijo 2 se vuelven rojos y el nieto no cambia de color.
3. Selector de unión : cambia un tipo de etiqueta al mismo estilo. Se puede agregar cualquier elemento al selector de unión.
gramática:
元素1，
元素2，
...
元素n {
样式申明
}
4. Selector de pseudo-tipo : se utiliza para agregar efectos a algunos selectores, como el cambio de color del texto del enlace cuando se hace clic en el enlace.
Selector de pseudo-clase común
a. Selector de pseudo-clase de enlace
a:link{
样式申明
}
//当链接还未被访问时会显示link内定义的样式
a:visited {
样式申明
}
//当链接被访问后会变成visited内定义的样式
a:hover{
样式申明
}
//当鼠标放在链接上时会显示hover内定义的样式
a:active{
样式申明
}
//当鼠标点击并且未松开时会显示active内定义的样式
Nota: Si se necesitan los cuatro selectores de enlaces durante el desarrollo, escriba en el orden de LVHA
b.focus selector de pseudo-clases: se utiliza para seleccionar el elemento de formulario para obtener el cursor . Sintaxis:
input:focus {
样式申明
}
//当光标点击到相应的input框的时候，input框会显示focus内定义的样式，
当光标离开后恢复原状
