1 00:00:00,970 --> 00:00:01,550 DE ACUERDO. 2 00:00:01,590 --> 00:00:06,090 Entonces, en este video vamos a tratar dos temas importantes y 3 00:00:06,090 --> 00:00:10,650 evaluar que todavía no hemos hablado y que son herencia y especificidad. 4 00:00:10,650 --> 00:00:15,670 Entonces, para empezar, vamos a demostrar la forma en que funciona la herencia y vemos evaluar. 5 00:00:15,690 --> 00:00:17,730 Así que tengo un archivo simple aquí. 6 00:00:18,000 --> 00:00:25,200 Tiene un único pozo con cuatro aliados en el interior y voy a escribir mis estilos en una etiqueta de estilo solo para que 7 00:00:25,200 --> 00:00:30,050 sea fácil de ver para que no tenga que mirarme dar la vuelta entre los archivos. 8 00:00:30,210 --> 00:00:33,800 Pero siempre es mejor hacerlo en una hoja de estilo externa. 9 00:00:34,560 --> 00:00:41,070 Así que voy a estilizar el UL y darle un color púrpura 10 00:00:44,580 --> 00:00:51,250 y cuando lo haga verás que cuando renuevo los aliados se vuelven morados. 11 00:00:51,270 --> 00:00:52,570 Entonces, ¿qué pasó allí? 12 00:00:52,620 --> 00:00:57,990 Sabes que diseñé el área donde se llamaba UL y la mentira se 13 00:00:57,990 --> 00:01:01,730 cambió indirectamente y heredó ese color del elemento principal. 14 00:01:01,830 --> 00:01:04,350 Déjame mostrarte otro ejemplo de eso. 15 00:01:05,370 --> 00:01:07,410 Agreguemos solo un párrafo aquí comienza 16 00:01:10,850 --> 00:01:15,890 en negro y voy a venir y pregonero que ahora será de color púrpura. 17 00:01:15,900 --> 00:01:18,010 Entonces, todo es solo texto negro normal. 18 00:01:18,010 --> 00:01:25,920 Haré esto un poco más grande si voy en mi estilo y digo cuerpo y le doy al 19 00:01:26,010 --> 00:01:28,980 cuerpo un color rojo y lo actualizo. 20 00:01:29,250 --> 00:01:31,370 Verás que todo es rojo. 21 00:01:32,040 --> 00:01:38,850 Así que esto es solo demostrar este concepto de herencia, donde si establecemos una propiedad en un elemento primario también 22 00:01:38,850 --> 00:01:40,720 puede afectar un elemento secundario. 23 00:01:40,920 --> 00:01:46,310 Así que esto es bueno si queremos que todos los párrafos y aliados sean leídos. 24 00:01:46,350 --> 00:01:50,540 No tenemos que sentarnos como párrafos y hacer que lean y luego seleccionar aliados y volverlos rojos. 25 00:01:50,580 --> 00:01:52,690 Podemos simplemente seleccionar el cuerpo. 26 00:01:53,490 --> 00:02:00,840 Entonces, lo siguiente que quiero mostrar es qué sucede si entro aquí y luego 27 00:02:01,320 --> 00:02:05,980 decido que un párrafo realmente quiero que sea verde. 28 00:02:08,670 --> 00:02:12,630 Si actualizamos, veremos, por supuesto, que el párrafo cambió a verde. 29 00:02:12,630 --> 00:02:22,350 Del mismo modo, si quiero que el ul sea verde o hagamos azul, y guardo y actualizo, la UL se vuelve azul y también lo 30 00:02:22,350 --> 00:02:24,830 hacen los aliados porque heredan de eso. 31 00:02:25,170 --> 00:02:31,040 Entonces, lo que está sucediendo aquí es en realidad demostrar esta idea de especificidad y CSSA. 32 00:02:31,680 --> 00:02:36,530 Entonces tenemos múltiples estilos que podrían estar afectando a este mismo aliado. 33 00:02:36,690 --> 00:02:43,410 Podría ser rojo y comienza en rojo y luego volverlo azul porque todo lo que se supone que 34 00:02:43,410 --> 00:02:44,220 es azul. 35 00:02:44,700 --> 00:02:52,410 Si seguimos adelante e inspeccionamos uno de estos elementos y voy a hacer esta pantalla completa y voy 36 00:02:52,410 --> 00:02:58,350 a aumentar esto y aumentar un poco el tamaño de la fuente, verás que 37 00:02:58,830 --> 00:03:08,190 el color se establece como azul proveniente de un UL y nos dice que heredamos de UL y si seguimos desplazándonos verás 38 00:03:08,190 --> 00:03:09,180 heredado del cuerpo. 39 00:03:09,300 --> 00:03:15,630 El color es rojo, pero en realidad está tachado, lo que significa que no se está aplicando en absoluto. 40 00:03:15,720 --> 00:03:17,990 Y en su lugar, este estilo se está aplicando. 41 00:03:18,150 --> 00:03:24,120 Entonces, esto nos muestra que este estilo está intentando aplicarse o está dirigido a este elemento que hemos 42 00:03:24,120 --> 00:03:28,640 seleccionado, pero está tachado, lo que significa que no se está aplicando en realidad. 43 00:03:29,850 --> 00:03:35,460 Entonces, el siguiente tema que está muy relacionado con la herencia se llama especificidad. 44 00:03:36,030 --> 00:03:42,570 Así que la especificidad es esta idea en el sentido de que podemos tener múltiples estilos dirigidos a un elemento 45 00:03:42,570 --> 00:03:44,060 y eso está sucediendo aquí. 46 00:03:44,100 --> 00:03:49,050 Tenemos múltiples estilos dirigidos a este UL o este aliado, por ejemplo. 47 00:03:49,320 --> 00:03:54,330 La mentira se está volviendo roja o está siendo atacada por esta línea. 48 00:03:54,360 --> 00:03:56,600 Cuerpo volteando todo en el cuerpo rojo. 49 00:03:56,700 --> 00:04:01,840 Y también está siendo atacado por esta línea que convierte todo en el azul de Juelz. 50 00:04:02,130 --> 00:04:05,310 Entonces, la SS debe decidir cuál gana. 51 00:04:05,370 --> 00:04:10,770 Y en este caso, sea cual sea el estilo más cercano a este elemento. 52 00:04:10,770 --> 00:04:16,600 Entonces, cualquiera que sea más específico y lo que eso significa es que el cuerpo es muy general, es todo. 53 00:04:17,280 --> 00:04:20,560 Y una UL es más específica que cuando va a ganar. 54 00:04:20,910 --> 00:04:22,790 Pero este es solo un caso simple. 55 00:04:22,800 --> 00:04:27,140 Entonces, aumentemos la apuesta un poco y agreguemos más selectores. 56 00:04:27,330 --> 00:04:35,160 Así que sigamos y agreguemos un selector de aliados directo y hagamos un aliado naranja. 57 00:04:35,820 --> 00:04:39,100 Y como era de esperar, hace que todos los aliados sean naranjas. 58 00:04:39,180 --> 00:04:47,830 Y si abrimos el inspector, veremos que el cuerpo lo está poniendo rojo, pero eso está tachado. 59 00:04:48,180 --> 00:04:53,550 El selector de UL lo está poniendo azul y el selector de vuelo lo está poniendo de 60 00:04:53,550 --> 00:04:55,050 color naranja y ese gana. 61 00:04:55,050 --> 00:04:59,200 Entonces, estos son todos casos simples donde está bastante claro cuál gana. 62 00:04:59,400 --> 00:05:02,590 Pero ahora vamos a presentar algo sobre esto. 63 00:05:02,940 --> 00:05:10,680 Digamos ahora que quiero que esto tenga una clase llamada resaltar y se lo 64 00:05:14,020 --> 00:05:24,460 daré a dos de ellos y luego selecciono este resaltado de clase y le doy un color de fondo. 65 00:05:25,120 --> 00:05:26,550 En realidad, simplemente sigamos con el color. 66 00:05:26,860 --> 00:05:31,090 Solo que es el mismo color de propiedad de amarillo y guardo. 67 00:05:31,090 --> 00:05:33,040 ¿Cuál crees que va a ganar ahora? 68 00:05:33,610 --> 00:05:40,780 Vamos a verificar y se puede ver que la clase destacada gana y se vuelve amarilla debido a esa 69 00:05:40,780 --> 00:05:41,910 clase tan alta. 70 00:05:42,370 --> 00:05:48,400 Así que esto nos está mostrando algo donde en L. A. Estamos apuntando directamente a todos los aliados y haciéndolos 71 00:05:48,670 --> 00:05:53,960 de color naranja y luego también estamos apuntando directamente a unos pocos aliados que tienen esta clase y que los hacen amarillos. 72 00:05:54,190 --> 00:05:56,960 Y en este caso, esta clase gana. 73 00:05:57,370 --> 00:06:01,420 Entonces, en realidad, hay reglas muy específicas sobre cómo funciona esto y se lo mostraré en 74 00:06:01,420 --> 00:06:02,100 solo un segundo. 75 00:06:02,140 --> 00:06:10,420 Pero antes solo quiero agregar un ejemplo más, así que digamos también darle a este elemento un I. RE. y voy 76 00:06:10,420 --> 00:06:13,520 a llamarlo especial. 77 00:06:13,610 --> 00:06:22,320 Voy a apuntar ese elemento especial y voy a darle un color de rosa y refresco. 78 00:06:22,330 --> 00:06:24,760 Verás que ese elemento gana. 79 00:06:24,850 --> 00:06:32,770 más si inspeccionamos verá que tenemos un estilo del cuerpo que no se aplica desde el pozo que se hereda pero no se 80 00:06:32,770 --> 00:06:38,570 aplica desde la mentira de que no se aplicó uno de la clase que no se aplicó. 81 00:06:38,570 --> 00:06:39,430 Y una vez 82 00:06:39,520 --> 00:06:43,660 Y luego uno de la identificación especial que se aplica. 83 00:06:43,750 --> 00:06:46,790 Entonces, en este caso, la identificación gana. 84 00:06:47,020 --> 00:06:50,490 Entonces, como mencioné, hay reglas muy específicas sobre cómo funciona esto. 85 00:06:50,830 --> 00:06:52,690 Y los escribí aquí. 86 00:06:52,840 --> 00:06:57,310 Pero en realidad voy a ir a M. D y primero para mostrarle que tienen un 87 00:06:57,310 --> 00:07:02,320 excelente artículo sobre este tema que le recomiendo que lea y que diga cómo se calcula la especificidad. 88 00:07:02,320 --> 00:07:08,440 Entonces, cuando ve que hay tres o cuatro colores diferentes, este podría ser. 89 00:07:08,560 --> 00:07:10,540 ¿Cómo sabe cuál elegir? 90 00:07:10,810 --> 00:07:16,870 Y la forma en que lo hace realmente ejecuta el cálculo, por lo que asigna un valor 91 00:07:16,870 --> 00:07:19,210 numérico a cada uno de esos selectores. 92 00:07:19,420 --> 00:07:26,020 Así que va a asignar un valor numérico a esto aquí y luego a este y luego a este 93 00:07:26,020 --> 00:07:27,180 y a este. 94 00:07:27,220 --> 00:07:30,180 Y como sabemos, este gana. 95 00:07:30,250 --> 00:07:36,340 Entonces, de la manera en que se calcula realmente, no tenemos que saber la matemática exacta, pero 96 00:07:36,340 --> 00:07:37,640 se los mostraré aquí. 97 00:07:37,720 --> 00:07:43,810 Existe una calculadora en la que podemos escribir cosas en línea que nos digan cuán específico 98 00:07:43,810 --> 00:07:44,470 es algo. 99 00:07:44,800 --> 00:07:51,920 Entonces, si selecciono todos los aliados, verán que tiene la especificidad de uno. 100 00:07:51,940 --> 00:07:59,560 Ahora vamos a tratar de perder esa clase destacada y eso es 10 veces más específico que la especificidad de 10. 101 00:08:00,040 --> 00:08:04,380 Entonces esa es la razón por la cual una clase 1 sale de la mentira. 102 00:08:04,390 --> 00:08:11,530 Y es por eso que este elemento es realmente amarillo porque ese resaltado de clase ganó sobre el 103 00:08:11,530 --> 00:08:12,510 color naranja. 104 00:08:13,180 --> 00:08:15,430 Ahora si vamos y agregamos un I. RE. 105 00:08:18,430 --> 00:08:24,660 o lo que llamamos especial, puede ver que es 100 veces más específico que solo la etiqueta de la ley. 106 00:08:24,790 --> 00:08:28,540 Así que uno gana y eso también supera a la clase. 107 00:08:28,540 --> 00:08:36,670 Entonces, la regla básica aquí es que los nombres de las etiquetas de los selectores de elementos no son muy específicos. Los selectores de clases son mucho 108 00:08:36,670 --> 00:08:41,340 más específicos y, por lo tanto, los ID son los más específicos que se pueden obtener. 109 00:08:41,650 --> 00:08:44,920 Y también le mostraré que no está limitado solo a una ID. 110 00:08:44,950 --> 00:08:48,330 Entonces, digamos que queríamos saber qué es más específico. 111 00:08:48,340 --> 00:08:53,320 Tengo una clase y otra clase dentro de ella. 112 00:08:53,320 --> 00:08:59,170 Entonces, este es un Selecta descendiente, recuerda que esto es solo 20 especificidades. 113 00:08:59,530 --> 00:09:05,160 Y si solo tengo un solo yo RE. Eso es 100 especificidad. 114 00:09:05,170 --> 00:09:09,970 Así que, nuevamente, no quiero que piense que debe usar el sitio todo el tiempo y calcular los números. 115 00:09:10,180 --> 00:09:11,440 Eso no es importante. 116 00:09:11,440 --> 00:09:16,360 Todo lo que necesita saber es el orden de las magnitudes, así que iré a mis notas 117 00:09:16,360 --> 00:09:19,930 aquí y las escribiré Los selectores de tipo son los menos específicos. 118 00:09:19,930 --> 00:09:28,390 Así que eso se verá como algo así o aliado con un ATF dentro de él o 119 00:09:28,390 --> 00:09:30,580 incluso el selector adyacente. 120 00:09:30,700 --> 00:09:34,190 Entonces estos selectores no son muy específicos. 121 00:09:34,330 --> 00:09:38,860 Pero incluso dentro de este año, esto va a ser más específico que esto. 122 00:09:38,890 --> 00:09:43,870 Esto va a ser más específico que esto también porque hay dos elementos a los que nos referimos. 123 00:09:44,200 --> 00:09:47,360 Entonces, si realmente lo calculamos, esto es especificidad de uno. 124 00:09:47,530 --> 00:09:48,850 Y esto es dos. 125 00:09:49,570 --> 00:09:52,780 Entonces el siguiente nivel es una clase. 126 00:09:53,890 --> 00:10:01,610 Así que esto va a ser un orden de magnitud 10 veces más grande o más específico que cualquiera de estos. 127 00:10:02,320 --> 00:10:04,380 Y también lo es el selector de atributos. 128 00:10:04,420 --> 00:10:16,600 el tipo de entrada es igual al texto y también lo son estos selectores de pseudo clase que son cosas como flotar. 129 00:10:16,600 --> 00:10:19,660 Entonces, donde tenemos cosas como 130 00:10:19,750 --> 00:10:26,890 Entonces, se ha verificado una etiqueta sobre el desplazamiento o la entrada y otras cosas como esa que tienen estos dos puntos allí. 131 00:10:28,060 --> 00:10:31,890 Y luego, lo más específico es el yo RE. selector. 132 00:10:32,230 --> 00:10:37,840 Y ese va a ser otro orden de magnitud mayor o más específico que los selectores aquí.