Las hojas de estilo en cascada, conocidas con cariño como CSS , son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web. Describe cómo debe verse una página web: prescribe colores, fuentes, espaciado y mucho más. En resumen, puedes hacer que tu sitio web se vea como quieras. CSS permite a los desarrolladores y diseñadores definir cómo se comporta, incluso cómo se colocan los elementos en el navegador.
En este artículo, aprenderemos por qué los navegadores hacen coincidir los selectores de CSS de derecha a izquierda.
¿Por qué los navegadores coinciden con los selectores de CSS de derecha a izquierda?
#nav ul li {...}
Nota: el navegador leerá desde li -> ul -> #nav
El navegador hace coincidir los selectores de CSS de derecha a izquierda porque brinda un punto de partida obvio y le permite deshacerse de la mayoría de los selectores candidatos muy rápidamente.
Si el navegador se muestra desde el lado izquierdo, entonces hay más posibilidades de que si la clase/id/nombre del elemento no es correcto o se olvida de usar ‘#’ para id y ‘.’ para la clase, entonces el navegador ni siquiera intentará leer los datos restantes. Por otro lado, si se representa desde el lado derecho, el navegador intentará obtener los datos.
Ejemplo 1: en el siguiente código, el navegador elegirá el selector de CSS de derecha a izquierda. Primero, buscará todas las etiquetas <span> del navegador, luego buscará la etiqueta <h1> y, al final, buscará la etiqueta <div> .
HTML
<!DOCTYPE html> <html> <!DOCTYPE html> <html> <head> <style> div h1 span { color: green; } </style> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Right to left selectors</p> </b> <div> This is div <h1> This is h1 tag<br /> <span> This is span tag </span> </h1> </div> <span> This is span outside div </span> </center> </body> </html> <head> <style> div h1 span{ color:green; } </style> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Right to left selectors</p> </b> <div> This is div <h1> This is h1 tag<br/> <span> This is span tag </span> </h1> </div> <span> This is span outside div </span> </center> </body> </html>
Producción:
Ejemplo 2: en el siguiente código, el navegador elegirá el selector de CSS de derecha a izquierda. Primero, buscará todas las etiquetas <b> del navegador, luego buscará la etiqueta <span> y, al final, buscará la etiqueta <div> .
HTML
<!DOCTYPE html> <html> <head> <style> div span b { color: green; } span { font-size: 40px; } body { background-color: lightgrey; } </style> </head> <body> <center> <div> <span> <b> GeeksforGeeks </b> </span> </div> <h2>A computer science portal for geeks</h2> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA