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