DE ACUERDO.
Entonces, en este video vamos a tratar dos temas importantes y
evaluar que todavía no hemos hablado y que son herencia y especificidad.
Entonces, para empezar, vamos a demostrar la forma en que funciona la herencia y vemos evaluar.
Así que tengo un archivo simple aquí.
Tiene un único pozo con cuatro aliados en el interior y voy a escribir mis estilos en una etiqueta de estilo solo para que
sea fácil de ver para que no tenga que mirarme dar la vuelta entre los archivos.
Pero siempre es mejor hacerlo en una hoja de estilo externa.
Así que voy a estilizar el UL y darle un color púrpura
y cuando lo haga verás que cuando renuevo los aliados se vuelven morados.
Entonces, ¿qué pasó allí?
Sabes que diseñé el área donde se llamaba UL y la mentira se
cambió indirectamente y heredó ese color del elemento principal.
Déjame mostrarte otro ejemplo de eso.
Agreguemos solo un párrafo aquí comienza
en negro y voy a venir y pregonero que ahora será de color púrpura.
Entonces, todo es solo texto negro normal.
Haré esto un poco más grande si voy en mi estilo y digo cuerpo y le doy al
cuerpo un color rojo y lo actualizo.
Verás que todo es rojo.
Así que esto es solo demostrar este concepto de herencia, donde si establecemos una propiedad en un elemento primario también
puede afectar un elemento secundario.
Así que esto es bueno si queremos que todos los párrafos y aliados sean leídos.
No tenemos que sentarnos como párrafos y hacer que lean y luego seleccionar aliados y volverlos rojos.
Podemos simplemente seleccionar el cuerpo.
Entonces, lo siguiente que quiero mostrar es qué sucede si entro aquí y luego
decido que un párrafo realmente quiero que sea verde.
Si actualizamos, veremos, por supuesto, que el párrafo cambió a verde.
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
hacen los aliados porque heredan de eso.
Entonces, lo que está sucediendo aquí es en realidad demostrar esta idea de especificidad y CSSA.
Entonces tenemos múltiples estilos que podrían estar afectando a este mismo aliado.
Podría ser rojo y comienza en rojo y luego volverlo azul porque todo lo que se supone que
es azul.
Si seguimos adelante e inspeccionamos uno de estos elementos y voy a hacer esta pantalla completa y voy
a aumentar esto y aumentar un poco el tamaño de la fuente, verás que
el color se establece como azul proveniente de un UL y nos dice que heredamos de UL y si seguimos desplazándonos verás
heredado del cuerpo.
El color es rojo, pero en realidad está tachado, lo que significa que no se está aplicando en absoluto.
Y en su lugar, este estilo se está aplicando.
Entonces, esto nos muestra que este estilo está intentando aplicarse o está dirigido a este elemento que hemos
seleccionado, pero está tachado, lo que significa que no se está aplicando en realidad.
Entonces, el siguiente tema que está muy relacionado con la herencia se llama especificidad.
Así que la especificidad es esta idea en el sentido de que podemos tener múltiples estilos dirigidos a un elemento
y eso está sucediendo aquí.
Tenemos múltiples estilos dirigidos a este UL o este aliado, por ejemplo.
La mentira se está volviendo roja o está siendo atacada por esta línea.
Cuerpo volteando todo en el cuerpo rojo.
Y también está siendo atacado por esta línea que convierte todo en el azul de Juelz.
Entonces, la SS debe decidir cuál gana.
Y en este caso, sea cual sea el estilo más cercano a este elemento.
Entonces, cualquiera que sea más específico y lo que eso significa es que el cuerpo es muy general, es todo.
Y una UL es más específica que cuando va a ganar.
Pero este es solo un caso simple.
Entonces, aumentemos la apuesta un poco y agreguemos más selectores.
Así que sigamos y agreguemos un selector de aliados directo y hagamos un aliado naranja.
Y como era de esperar, hace que todos los aliados sean naranjas.
Y si abrimos el inspector, veremos que el cuerpo lo está poniendo rojo, pero eso está tachado.
El selector de UL lo está poniendo azul y el selector de vuelo lo está poniendo de
color naranja y ese gana.
Entonces, estos son todos casos simples donde está bastante claro cuál gana.
Pero ahora vamos a presentar algo sobre esto.
Digamos ahora que quiero que esto tenga una clase llamada resaltar y se lo
daré a dos de ellos y luego selecciono este resaltado de clase y le doy un color de fondo.
En realidad, simplemente sigamos con el color.
Solo que es el mismo color de propiedad de amarillo y guardo.
¿Cuál crees que va a ganar ahora?
Vamos a verificar y se puede ver que la clase destacada gana y se vuelve amarilla debido a esa
clase tan alta.
Así que esto nos está mostrando algo donde en L. A. Estamos apuntando directamente a todos los aliados y haciéndolos
de color naranja y luego también estamos apuntando directamente a unos pocos aliados que tienen esta clase y que los hacen amarillos.
Y en este caso, esta clase gana.
Entonces, en realidad, hay reglas muy específicas sobre cómo funciona esto y se lo mostraré en
solo un segundo.
Pero antes solo quiero agregar un ejemplo más, así que digamos también darle a este elemento un I. RE. y voy
a llamarlo especial.
Voy a apuntar ese elemento especial y voy a darle un color de rosa y refresco.
Verás que ese elemento gana.
más si inspeccionamos verá que tenemos un estilo del cuerpo que no se aplica desde el pozo que se hereda pero no se
aplica desde la mentira de que no se aplicó uno de la clase que no se aplicó.
Y una vez
Y luego uno de la identificación especial que se aplica.
Entonces, en este caso, la identificación gana.
Entonces, como mencioné, hay reglas muy específicas sobre cómo funciona esto.
Y los escribí aquí.
Pero en realidad voy a ir a M. D y primero para mostrarle que tienen un
excelente artículo sobre este tema que le recomiendo que lea y que diga cómo se calcula la especificidad.
Entonces, cuando ve que hay tres o cuatro colores diferentes, este podría ser.
¿Cómo sabe cuál elegir?
Y la forma en que lo hace realmente ejecuta el cálculo, por lo que asigna un valor
numérico a cada uno de esos selectores.
Así que va a asignar un valor numérico a esto aquí y luego a este y luego a este
y a este.
Y como sabemos, este gana.
Entonces, de la manera en que se calcula realmente, no tenemos que saber la matemática exacta, pero
se los mostraré aquí.
Existe una calculadora en la que podemos escribir cosas en línea que nos digan cuán específico
es algo.
Entonces, si selecciono todos los aliados, verán que tiene la especificidad de uno.
Ahora vamos a tratar de perder esa clase destacada y eso es 10 veces más específico que la especificidad de 10.
Entonces esa es la razón por la cual una clase 1 sale de la mentira.
Y es por eso que este elemento es realmente amarillo porque ese resaltado de clase ganó sobre el
color naranja.
Ahora si vamos y agregamos un I. RE.
o lo que llamamos especial, puede ver que es 100 veces más específico que solo la etiqueta de la ley.
Así que uno gana y eso también supera a la clase.
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
más específicos y, por lo tanto, los ID son los más específicos que se pueden obtener.
Y también le mostraré que no está limitado solo a una ID.
Entonces, digamos que queríamos saber qué es más específico.
Tengo una clase y otra clase dentro de ella.
Entonces, este es un Selecta descendiente, recuerda que esto es solo 20 especificidades.
Y si solo tengo un solo yo RE. Eso es 100 especificidad.
Así que, nuevamente, no quiero que piense que debe usar el sitio todo el tiempo y calcular los números.
Eso no es importante.
Todo lo que necesita saber es el orden de las magnitudes, así que iré a mis notas
aquí y las escribiré Los selectores de tipo son los menos específicos.
Así que eso se verá como algo así o aliado con un ATF dentro de él o
incluso el selector adyacente.
Entonces estos selectores no son muy específicos.
Pero incluso dentro de este año, esto va a ser más específico que esto.
Esto va a ser más específico que esto también porque hay dos elementos a los que nos referimos.
Entonces, si realmente lo calculamos, esto es especificidad de uno.
Y esto es dos.
Entonces el siguiente nivel es una clase.
Así que esto va a ser un orden de magnitud 10 veces más grande o más específico que cualquiera de estos.
Y también lo es el selector de atributos.
el tipo de entrada es igual al texto y también lo son estos selectores de pseudo clase que son cosas como flotar.
Entonces, donde tenemos cosas como
Entonces, se ha verificado una etiqueta sobre el desplazamiento o la entrada y otras cosas como esa que tienen estos dos puntos allí.
Y luego, lo más específico es el yo RE. selector.
Y ese va a ser otro orden de magnitud mayor o más específico que los selectores aquí.