Directorio de artículos
Dependiendo del tipo de selector en el selector base selector y un selector compuesto , el selector compuesto se construye sobre la base del selector, el selector para la combinación de la formación básica.
- El selector de compuestos puede seleccionar el elemento de destino (etiqueta) de manera más precisa y eficiente
- Un selector compuesto se compone de dos o más selectores básicos combinados de diferentes formas
- Los selectores compuestos comúnmente usados incluyen: selectores descendientes, sub-selectores, selectores de unión, selectores de pseudo-clases, etc.
1. Selector de descendientes
El selector descendiente también se denomina selector de contención, que puede seleccionar los elementos secundarios en el elemento principal. El método de escritura consiste en escribir la etiqueta exterior en la parte delantera y la etiqueta interior en la parte posterior, separadas por un espacio. Cuando las etiquetas están anidadas, la etiqueta interna se convierte en la descendiente de la etiqueta externa.
gramática:
元素1 元素2 {
样式声明 }
La sintaxis anterior significa seleccionar todos los elementos 2 (elementos descendientes) en el elemento 1.
P.ej:
ul li {
样式声明 }
/* 选择 ul 里面所有的 li标签元素 */
- El elemento 1 es el padre, el elemento 2 es el hijo y, finalmente, se selecciona el elemento 2
- El elemento 2 puede ser un hijo, nieto, etc., siempre que sea descendiente del elemento 1
- El elemento 1 y el elemento 2 pueden ser cualquier selector básico
2. Selector de niños
Solo se puede seleccionar como el elemento secundario más cercano de un elemento. La comprensión simple es elegir el elemento pro-hijo.
Gramática:
元素1 > 元素2 {
样式声明 }
Por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.one>li {
color: red;
}
</style>
<body>
<ul class="one">
<li>one</li>
<li><a href="#">two</a></li>
</ul>
<ul class="two">
<li>one</li>
<li><a href="#">two</a></li>
</ul>
</body>
</html>
3. Selector de unión
El selector de unión se forma concatenando los selectores con comas en inglés (,). Cualquier forma de selector se puede utilizar como parte del selector de unión.
tal como:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h1,
div,
.pig {
color: red
}
</style>
<body>
<h1>你好</h1>
<div>中午好</div>
<ol class="pig">
<li>猪妈</li>
<li>猪爸</li>
<li>佩奇</li>
</ol>
</body>
</html>
4. Selector de pseudoclase de enlace
a: enlace visitado por enlace
a: enlace visitado cambiará
a: pase el mouse sobre el enlace cambiará
a: enlace seleccionado activo
Debe declararse en el orden de LVHA: enlace－: visitado－: hover－: activo
El método de escritura en el desarrollo real del selector de pseudoclase de enlace: (por lo general, primero es un color predeterminado y luego se desplaza)
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
链
Al mismo tiempo, tenga en cuenta: a El enlace tiene un estilo predeterminado en el navegador, por lo que debemos especificar el estilo por separado para el enlace en el trabajo real.
(Es decir, incluso si usas el cuerpo para especificar el color de la fuente, el color del enlace no cambiará, debes especificarlo específicamente)
5. selector de pseudo-clase de enfoque
El pseudo selector: focus se utiliza para seleccionar el elemento de formulario que tiene el foco.
El foco del cursor es, en general, <input>como obtener elementos de formulario, por lo que esta elección también tiene como objetivo formar elementos para.
input:focus {
background-color:yellow;
}
6. Resumen
