Selector de pseudoclase
Los selectores de pseudoclase y los selectores de pseudoelementos pueden especificar estilos para resultados no específicos en un documento, o estilos para el estado de ciertos elementos (incluido el documento mismo). Aplica estilos basados en ciertas condiciones en lugar de la estructura del documento.
El uso de selectores de pseudo-clases es el siguiente:
HTML标记 伪类名{伪类名：属性值；属性名：属性值；.....}
Las pseudo-clases comunes se muestran en la siguiente tabla:
| Nombre de pseudoclase | Descripción |
|---|---|
| :enlace | El mouse no se puso en el estilo anterior |
| :visitó | Estilos de hipervínculos visitados |
| :atención | Cuando el elemento se llama foco, a menudo se usa para elementos de formulario |
| :flotar | Se usa cuando el mouse está sobre un elemento y no se ha activado ni se ha hecho clic, por ejemplo, el puntero del mouse puede permanecer en un hipervínculo y: al pasar el mouse, se indicará el hipervínculo |
Uso de selectores de pseudo-clase
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪类的使用</title>
<style>
a:link{/*超链接初始颜色为blue*/
color: blue;
}
a:visited{/*超链接点击一次之后，颜色变为darkslategrey;*/
color: darkslategrey;
}
a:hover{/*鼠标在超链接上时，超链接颜色为yellow*/
color: yellow;
}
a{
font-size: 32px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/lolly1023">CSDN：董小宇</a>
</div>
</body>
</html>
El efecto es el siguiente: el
azul es el color de configuración inicial y el amarillo es el color donde el mouse está atascado en la conexión.
Instrucciones para el uso de pseudo-clases:
a El orden de las pseudo-clases debe ser LVHA (: enlace: visitado: foco: pasar el mouse) En la definición de CSS, un: hover debe colocarse después de un: enlace y a: visto para ser válido Sí, en la definición CSS, a: active debe colocarse después de a: hover para que sea efectivo.
Selector de pseudoelementos
El método para usar el selector de pseudoelementos es el siguiente:
Etiquetas HTML: pseudoelementos (nombre del atributo: valor del atributo; nombre del atributo: valor del atributo; ...)
Los pseudoelementos comunes se muestran en la siguiente tabla:
| Nombre de pseudoelemento | Descripción |
|---|---|
| :primera letra | Agregue estilos especiales a la primera letra del texto, asociados con elementos de nivel de bloque |
| :primera linea | Agregue un estilo especial al primer vuelo del texto. |
| :antes de | Agregue contenido antes del elemento, el pseudo-elemento predeterminado es el elemento en línea |
| :después | Agregar contenido después del elemento |
Uso de pseudoelementos
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇伪元素的使用</title>
<style>
/*第一行的首字母发生变化*/
div::first-letter{/*设置第一段开头第一个字大小为64px*/
font-size: 64px;
}
/*第一行全部修改*/
div::first-line{/*设置第一行的背景色为red*/
background-color: red;
}
/*在文本前面添加内容*/
div::before{/*在开头添加内容，需要使用content才能添加*/
/*添加文本内容*/
content: 'CSDN';
font-style: italic;
}
/*在文本后面添加内容*/
div::after{/*在开头添加内容，需要使用content才能添加*/
content: '董小宇';
color: blue;
}
</style>
</head>
<body>
<div>
伪元素的实例
</div>
</body>
</html>
El efecto es el siguiente:
Selector de intersección
- El selector de intersección se compone de dos selectores, y el resultado es seleccionar la intersección de los dos rangos de elementos de la cuadrícula.
- Requisitos: el primer selector en la intersección debe ser un selector de etiquetas, y el segundo debe ser un selector de clase o un selector de id.
- No debe haber espacios entre los dos selectores, y deben escribirse continuamente.
Uso del selector de intersección
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN董小宇交集选择器的使用</title>
<style>
p.p1{/**使用交集选择器，选中了p标签与类选择器为p1的内容，然后进行修改/
font-size: 32px;
}
</style>
</head>
<body>
<div>
<p class="p1">我使用了交集选择器</p>
<p>我没有使用交集选择器</p>
</div>
</body>
</html>
El efecto es el siguiente:
También soy un principiante en programación. Si hay algo mal con la comprensión, espero que puedas comentar el error después de leerlo. Gracias.
