OK.
Quindi in questo video tratteremo due argomenti importanti e vedremo
come non abbiamo ancora parlato e quelli sono eredità e specificità.
Quindi per iniziare dimostreremo il modo in cui funziona l'eredità e vediamo come valutare.
Quindi ho un semplice file qui.
Ha un singolo pozzo con quattro alleati all'interno e scriverò i miei stili in un tag di stile solo per far sì
che sia facile per te vedere che non devi guardarmi girare tra i file.
Ma è sempre meglio farlo in un foglio di stile esterno.
Quindi modellerò l'UL e gli darò un colore viola e quando
lo farò vedrai che quando rinfresco gli alleati diventano effettivamente viola.
Quindi cosa è successo lì.
Sai che ho disegnato l'area in cui sono stati disegnati gli UL e la bugia
è stata modificata indirettamente e ha ereditato quel colore dall'elemento genitore.
Quindi lascia che ti mostri un altro esempio di questo.
Aggiungiamo solo un paragrafo qui
inizia nero e ho intenzione di venire e tout questo viola per ora.
Quindi tutto è solo normale testo nero.
Lo renderò un po 'più grande se vado nel mio stile e dico corpo e conferisco al
corpo un colore rosso e lo aggiorno.
Vedrai che tutto è rosso.
Quindi questo sta solo dimostrando questo concetto di ereditarietà in cui se impostiamo una proprietà su un genitore può
anche influenzare un elemento figlio.
Quindi questo è bello se vogliamo che tutti i paragrafi e tutti gli alleati vengano letti.
Non dobbiamo sederci come dei paragrafi e girarli, quindi selezionare gli alleati e trasformarli in rosso.
Possiamo solo selezionare il corpo.
Quindi la prossima cosa che voglio mostrare è che cosa succede se vado qui e
poi decido che un paragrafo lo voglio davvero essere verde.
Se aggiorniamo vedremo ovviamente che il paragrafo diventa verde.
Allo stesso modo, se voglio che l'ul sia verde o facciamo il blu e io salvi e aggiorni, l'UL diventa blu e così fanno
gli alleati perché ereditano da quello.
Quindi quello che sta succedendo qui sta effettivamente dimostrando questa idea di specificità e CSSA.
Quindi abbiamo più stili che potrebbero avere un impatto su questo stesso alleato.
Potrebbe essere rosso e inizia come rosso e quindi restituirlo blu perché tutto ciò che si suppone
essere blu.
Quindi se andiamo avanti e ispezioniamo uno di questi elementi e renderò questo a schermo intero e ho
intenzione di aumentare questo e aumentare un po 'la dimensione del carattere vedrai che
il colore è impostato come blu proveniente da un UL e ci dice ereditato da UL e se continuiamo a scorrere vedremo
ereditato dal corpo.
Il colore è rosso ma in realtà è barrato e questo significa che non viene applicato affatto.
E invece questo stile viene applicato.
Quindi questo ci mostra che questo stile sta tentando di essere applicato o sta prendendo di mira questo elemento
che abbiamo selezionato ma è stato cancellato, il che significa che non viene effettivamente applicato.
Quindi il prossimo argomento che è strettamente correlato all'ereditarietà è chiamato specificità.
Quindi la specificità è questa idea, nel senso che possiamo avere più stili che prendono di mira un elemento e
questo sta accadendo proprio qui.
Abbiamo più stili che hanno come target questo UL o questo alleato.
La bugia sta diventando rossa o è stata presa di mira da questa linea.
Corpo che trasforma tutto nel corpo in rosso.
Ed è anche preso di mira da questa linea che trasforma tutto in tutto il blu di Juelz.
E così allora le SS devono decidere quale vincerà.
E in questo caso qualunque stile è più vicino a questo elemento.
Quindi, qualunque sia più specifico e quindi ciò che questo significa che il corpo è molto generale, è tutto.
E un UL è più specifico di quando vincerà.
Ma questo è solo un caso semplice.
Quindi ora alziamo un po 'la posta e aggiungiamo altri selettori.
Quindi andiamo avanti e aggiungiamo un selettore alleato diretto e facciamo un alleato arancione.
E come ti aspetteresti, rende tutti gli alleati arancioni.
E se apriamo l'ispettore vedremo che è stato trasformato in rosso dal corpo, ma questo è cancellato.
Viene reso blu dal selettore UL e poi viene trasformato in arancione dal selettore di
mosche e quello vince.
Quindi questi sono tutti casi semplici in cui è abbastanza chiaro quale si vince.
Ma ora introduciamo qualcosa in più.
Diciamo ora che voglio che questo abbia una classe chiamata highlight e la
darò a due di essi e poi selezionerò questa evidenziazione di classe e darò un colore di sfondo.
In realtà limitiamoci al colore.
Solo così è tutto lo stesso colore della proprietà del giallo e io salvo.
Quale pensi che vincerai adesso.
Controlliamo e puoi vedere che la classe di evidenziazione vince e diventa gialla a causa di quella
alta come classe.
Quindi questo ci sta mostrando qualcosa in cui in L. UN. Stiamo prendendo di mira tutti gli alleati e
li facciamo diventare arancioni, quindi stiamo anche prendendo di mira alcuni alleati che hanno questa classe e li rendono gialli.
E in questo caso questa classe vince.
Quindi ci sono regole molto specifiche su come funziona e ve lo mostrerò in
un secondo.
Ma prima voglio solo aggiungere un altro esempio, quindi diamo anche questo elemento a I. D. e lo
chiamerò speciale.
Ho intenzione di bersagliare quell'elemento speciale e ho intenzione di dargli un colore rosa e lo aggiorno.
Vedrai che quell'elemento vince.
una volta se ispezioniamo vedrai che abbiamo uno stile dal corpo che non è applicato dal pozzo che è ereditato ma
non applicato dalla menzogna che non è applicato uno dalla classe che non è applicata.
E ancora
E poi uno dall'ID speciale che viene applicato.
Quindi in questo caso l'ID vince.
Quindi, come ho detto, ci sono regole molto specifiche su come funziona.
E li ho scritti qui.
Ma in realtà sto andando a M. D e prima di mostrarti che hanno un
grande articolo su questo argomento che consiglio vivamente di leggere e che parla di come viene calcolata la specificità.
Quindi, quando vede che ci sono tre o quattro colori diversi, questo potrebbe essere.
Come fa a sapere quale scegliere.
E il modo in cui lo fa esegue effettivamente il calcolo, quindi assegna un valore
numerico a ciascuno di questi selettori.
Quindi assegnerà un valore numerico a questo qui e poi a questo e poi a questo
e a questo.
E come sappiamo questo vince.
Quindi, il modo in cui viene effettivamente calcolato non è in realtà necessario conoscere la matematica esatta, ma
te lo mostrerò qui.
C'è una calcolatrice che possiamo effettivamente scrivere cose online che ci diranno quanto è
specifico qualcosa.
Quindi se seleziono tutti gli alleati vedrai che ha la specificità di uno.
Ora proviamo ad attuare l'evidenziazione di classe e 10 volte più specifica della specificità di 10.
Ecco perché una classe 1 ha superato la bugia.
Ed è per questo che questo elemento è in realtà giallo perché il clou della classe ha vinto
sul colore arancione.
Ora se andiamo e aggiungiamo un I. D.
o quello che chiamiamo uno speciale puoi vedere che è 100 volte più specifico del solo tag della legge.
In modo che uno vince e che batte anche la classe.
Quindi la regola di base qui è che i nomi dei tag dei selettori di elementi non sono selettori di classi molto specifici sono molto
più specifici e quindi gli ID sono i più specifici che è possibile ottenere.
E ti mostrerò anche che non è limitato a un solo ID.
Quindi diciamo che volevamo sapere cosa è più specifico.
Ho una classe e un'altra classe al suo interno.
Quindi questo è un discendente di Selecta, ricordo che questa è solo una specificità.
E se ho solo un singolo I. D. Questa è la 100 specificità.
Quindi, ancora una volta non voglio che tu pensi che sia necessario utilizzare il sito continuamente e calcolare i numeri.
Questo non è importante.
Tutto quello che devi sapere è l'ordine di grandezza, quindi andrò alle mie note qui
e farle scrivere i selettori di tipo sono i meno specifici.
Quindi sembrerà qualcosa di simile o alleato con un ATF al suo interno o
persino il selettore adiacente.
Quindi questi selettori non sono molto specifici.
Ma anche quest'anno, questo sarà più specifico di questo.
Questo sarà più specifico di questo anche perché ci sono due elementi a cui stiamo facendo riferimento.
Quindi se lo calcoliamo in realtà questa è la specificità di uno.
E questo è due.
Quindi il livello successivo è una classe.
Quindi questo sarà un ordine di grandezza 10 volte più grande o più specifico di ognuno di questi.
E così è il selettore di attributi.
il tipo di input è uguale al testo e così sono questi selettori di pseudo-classe che sono cose come hover.
Quindi, dove abbiamo cose come
Quindi un tag su hover o input che è stato controllato e altre cose come quella che hanno questo due punti lì.
E poi la cosa più specifica è la I. D. selettore.
E quindi questo sarà un altro ordine di grandezza maggiore o più specifico dei selettori qui.