In questo video esamineremo una soluzione al set di problemi dei selettori CSSA.
E ho intenzione di risolvere ogni problema dall'alto verso il basso.
Quindi sentiti libero di andare avanti se ce ne sono solo uno o due con cui hai avuto problemi.
Così abbiamo fatto il primo insieme nel video iniziale, dando all'elemento del corpo uno sfondo di questo colore.
Quindi diciamo solo che lo sfondo del corpo è questo colore, salvo per noi.
Andiamo avanti e caricarlo nell'aggiornamento del browser e puoi vedere che otteniamo uno sfondo grigio.
Quindi il prossimo è rendere l'elemento H uno di questo colore.
Quindi la stessa cosa eccetto piuttosto che lo sfondo abbiamo appena detto colorato.
Salviamo eredita o H-1 diventa viola.
Ricorda che se avessimo più di un H-1 sulla pagina sarebbero tutti viola.
Quindi questo prossimo è rendere tutti gli elementi H-2 arancioni.
Lo stesso identico selettore dei due precedenti.
E poi, per renderlo arancione, userò solo il colore arancione incorporato, ma potresti usare qualsiasi altro sistema
di colori e puoi vedere che otteniamo ogni età per quei quattro.
Diventano arancioni.
Quindi continueremo a spostare questo verso il lato per rendere blu tutti gli elementi alleati.
Scegli il tuo blu esadecimale.
Quindi per farlo selezioniamo tutti gli alleati e poi diamo loro un colore e faremo un
blu esadecimale.
Quindi potresti mettere tutto qui purché sia ​​più blu di ogni altra cosa.
Quindi ricorda che il primo canale è rosso, quindi i due successivi sono verdi.
Quindi faremo un po 'di verde e facciamo un po' di blu.
Salvalo e diamo un'occhiata agli alleati e puoi vedere che otteniamo luci blu.
Quindi ora cambia lo sfondo di ogni paragrafo in giallo.
E 'solo un altro in cui selezioniamo ogni elemento di un tipo.
Quindi tutti i paragrafi di sfondo giallo salvano e otteniamo un mucchio di paragrafi gialli.
Avanti selezionare tutti gli input e dare loro un bordo rosso di tre pixel.
Quindi, inserisci il bordo e ci sono alcuni modi per farlo, possiamo farlo tutto in una volta.
Ordina tre pixel rossi pieni
e puoi vedere che i nostri due input hanno un prefisso o un bordo rosso
pieno oppure possiamo fare
questo bordo rosso a colori con bordo separato con tre pixel e infine lo stile del bordo è solido per ragioni abbastanza ovvie.
È molto più facile farlo.
Ma occasionalmente vorrai farlo quando arrivi su javascript.
Vogliamo aggiornare solo una parte.
Quindi, quando un utente passa sopra qualcosa, si desidera cambiarlo da un bordo rosso a un bordo verde.
Bene, potremmo semplicemente voler cambiare il colore e possiamo lasciare allo stile quello che sono.
Quindi lo lascerò in questo modo.
Ora stiamo passando al selettore di classe.
Quindi dai tutto con la classe Ciao.
Uno sfondo bianco
E se guardiamo l'h t m l, in realtà c'è solo una cosa.
Questo primo paragrafo all'interno di questo div con classe.
Ciao.
Quindi selezioniamo quel punto di classe.
Ciao sfondo bianco.
E puoi vedere che prendiamo questo paragrafo qui.
Diventa bianco.
Next up dare l'elemento con ID speciale un bordo blu solido a due pixel.
Scegli la tua R. G. essere blu.
Quindi la stessa cosa ancora questa volta, invece di un punto, usiamo il segno di cancelletto o l'arco per
Thorpe e poi quel nome dell'ID che può vedere di nuovo è proprio qui.
E poi vogliamo dargli un bordo solido di due pixel così da pixel solido e poi R. G. essere blu.
E così avrà 0 rosso 100 verde 200 blu e se siamo freschi possiamo vedere che è piuttosto leggero, ma
un bordo blu di 2 pixel attorno a questo paragrafo con l'ID.
carattere di 25 pixel div e il suggerimento è usare questo carattere di proprietà Dasch di 25 pixel.
Avanti fai tutti i paragrafi che sono annidati all'interno del
Quindi quello che dobbiamo fare qui è piuttosto che selezionare tutti i paragrafi vogliamo solo i paragrafi che sono all'interno
di un div in modo da poter vedere che ci sono alcuni come questo qui che non è all'interno di un div.
Non vogliamo che siano 25 pixel nella dimensione del carattere.
e poi all'interno di quel div tutti i paragrafi così i paragrafi che vivono in qualsiasi div non importa quale
div solo qualsiasi paragrafo in qualsiasi div li selezionerà e gli daranno la dimensione del font 25 pixel salvando
quel refresh e puoi vedere che tutto questo diventa più grande ma quelli che dicono che il paragrafo non all'interno di un div non diventano più grandi perché
non sono invece di un div Next up rende solo gli input con testo di tipo hanno uno sfondo grigio.
Quindi usiamo questo selettore di discendenti dove diciamo div
Quindi questo è un altro tipo di selettore e si basa su un attributo.
Quindi l'attributo che vuoi fare è trovare dove il testo è uguale al testo.
Quindi in pratica solo questo input qui digita uguale a testo.
E così nel modo in cui lo facciamo inseriremo input e quindi parentesi quadre e parentesi quadre.
E poi all'interno di lì l'attributo che è il tipo e stiamo cercando dove è
uguale al testo e poi stiamo per dire lo sfondo grigio.
E poi se scorriamo quaggiù e aggiorna tieni gli occhi bene qui puoi vedere che otteniamo uno sfondo grigio.
Quindi, ancora una volta questo è utile se vuoi che selezioni tutti i link che sono andati a Google.
Dovremmo selezionare basato su H. F. oppure potremmo selezionare qualsiasi altro attributo là fuori.
Quindi, dopo, dai entrambi i paragrafi all'interno del terzo div uno sfondo rosa.
Quindi questo diventa un po 'pazzo.
Diamo un'occhiata all'HMO.
Ecco la nostra terza div. Il primo è qui.
Il secondo è qui e il
terzo è qui e ci sono due paragrafi e vogliamo selezionarli entrambi e dare loro uno sfondo rosa.
Quindi quello che abbiamo fatto prima è stato selezionare tutti i paragrafi all'interno di tutte le div che non funzioneranno qui.
Quello che facciamo quello che vogliamo fare è selezionare tutti i paragrafi all'interno del terzo div nella pagina.
E il modo in cui possiamo specificare il terzo div è usare la fine del tipo.
Quindi diremo div e di tipo 3.
Quindi questo ci darà un terzo div e poi invece di tutti i paragrafi
e poi diremo semplicemente che lo sfondo è rosa e salviamo l'aggiornamento e ricontrolliamo.
Ecco il nostro primo div.
Ecco il secondo div.
Ed ecco il terzo div.
Inizia a paragrafo inizia con cardigan e io sono il secondo paragrafo.
Eccoci al cardigan.
Sono il secondo paragrafo
Prossimo in alto dare questo secondo paragrafo all'interno del terzo div un bordo bianco bordo cinque pixel.
Quindi questo è molto simile tranne che vogliamo solo il secondo paragrafo all'interno del terzo div.
Quindi solo questo.
paragrafo e il tipo.
Quindi facciamo la stessa cosa quando selezioniamo il terzo div e il tipo 3 e poi, piuttosto che tutti i paragrafi, andremo a fare il
E vogliamo il secondo in modo che possiamo combinarli.
Questo selezionerà il secondo paragrafo invece del
terzo div e vogliamo dargli un bordo bianco 5 pixel bordo bianco 5 pixel.
Eccoci.
Ecco il nostro bordo bianco solido a cinque pixel sul secondo paragrafo nel div.
Non il primo
Quindi fai E-M nel terzo elemento div di colore bianco e 20 pixel.
Ecco questo E-M proprio qui cronut skateboard.
Se non conosci Krown, è davvero delizioso.
Forse sopravvalutato.
Pasticceria decisamente fuori moda a New York City.
Ha una ciambella e un croissant.
Quindi sicuramente a casa invece del vocabolario ipsum hipster qui.
E prenderemo quell'E-M e lo faremo Swan bianco e 20 pixel.
selezionare il terzo div 3 e poi solo l'E-M all'interno.
Quindi, come prima dovevamo
E questo selezionerà tutti gli IEM e succede solo che ce n'è solo uno.
Ma se ce ne fossero più di uno potremmo voler
dire E-M prima di tipo o E-M invece di un paragrafo, ma per ora lo lascerò per questo.
E vogliamo dargli un colore da bianco a colori e un colore bianco da 20 pixel e una da 20 pixel.
E solo per ricordarti che passeremo il tempo a parlare di font e dimensioni dei
caratteri e di altre cose nei video futuri.
Eccoci.
È bianco e la dimensione del carattere cambia.
Quindi ora ci sono alcuni degli esercizi bonus che sono alcuni dei miei preferiti.
Ci sono alcuni dei più oscuri i modi più interessanti di selezionare le cose e manipolarle.
Quindi per iniziare.
Diamo un'occhiata a fare le caselle di controllo hanno un margine sinistro di 50 pixel e l'ho dato a voi.
È necessario utilizzare il margine sinistro per 50 pixel.
Quindi c'è un selettore per selezionare gli elementi che sono controllati.
E sembra proprio questo.
È uno pseudo-selettore proprio come l'ennesimo tipo.
Quindi dobbiamo dire che quello che stiamo cercando è stato controllato.
Quindi dirò solo tutti gli input che sono stati controllati perché ricorda che
le caselle di controllo sono tipo di input nella casella di controllo ci sono altri elementi che possono essere controllati anche se principalmente il pulsante di opzione.
Quindi questo dovrebbe anche selezionare tutti i pulsanti radio che sono stati controllati e per ora va bene.
Quindi sembra che i due punti di input siano stati controllati.
E quello che vogliamo fare è usare il margine sinistro di cinquanta pixel.
Quindi questa è una piccola anticipazione di ciò che stiamo vedendo in
alcuni dei video futuri quando aggiungiamo questo e aggiungerà un po 'di spazio sul
lato sinistro della casella di controllo in modo da poter vedere quelli che sono stati spostati.
Ora se controllo questo ora questo è controllato e si sposta verso destra 50 pixel.
Se li deseleziono e torno indietro a sinistra.
Quindi è controllato.
Il prossimo.
Questo è probabilmente il mio preferito.
Rendi gli elementi dell'etichetta tutti in maiuscolo senza modificare l'HMO.
Quindi ho accennato che vorrete sicuramente vederlo
e questo perché sicuramente non l'abbiamo superato.
Quindi per iniziare
selezioniamo solo tutti gli elementi dell'etichetta e quindi diciamo che non so come renderli maiuscoli senza modificare l'HMO.
Quindi tiriamo su Google e facciamo una ricerca e questo è qualcosa che avevo sicuramente fatto prima.
Quindi andiamo su e facciamo una ricerca vedi vedi maiuscole puoi vedere la
prima cosa che appare è la trasformazione del testo e la trasformazione del testo dice che specifica come inserire il testo in maiuscolo.
Può essere usato per far apparire il testo in maiuscolo o in minuscolo o con ogni parola in maiuscolo.
Quindi, scorrere verso il basso e dare un'occhiata alla sintassi e sembra che abbiamo capitalizzare.
Prima lettera maiuscola e maiuscola del capitalista.
Quindi vogliamo le maiuscole.
Quindi il testo si trasforma in maiuscolo.
E quello che ho appena fatto non era solo per
mostrarti qualcosa che è in realtà qualcosa che faccio tutto il tempo che sta
cercando qualcosa su Google digitando C Ss blah blah blah CSSA maiuscolo C S S trasparente qualunque cosa io stia cercando di fare.
E guardo solo i risultati della ricerca perché ci sono così tante proprietà da ricordare.
Non puoi ricordare tutti loro.
Quindi questo è uno dei più oscuri.
Decisamente.
E se aggiorniamo questo è per le etichette che sono quaggiù.
Lasciatemi liberarmi di questo solo per mostrarti il ​​nostro tempo.
Queste sono le etichette.
E poi aggiungiamo questo e rinfreschiamo la parte superiore.
Quindi, dopo abbiamo creato la prima lettera dell'elemento con ID speciale verde e dimensione del carattere di 100 pixel.
Quindi, per indirizzare la prima lettera che è un'altra che potremmo voler
cercare, per prima cosa scrivici e vediamo cosa otteniamo.
Quindi sembra che ci sia un altro pseudo-selettore.
La prima lettera C S elemento seleziona la prima lettera della prima riga di un blocco.
Quindi se dai uno sguardo alla prima lettera di esempio.
Andiamo avanti e provalo.
Vogliamo prima selezionare l'ID speciale e quindi prima la lettera di quello.
E vogliamo renderlo verde e 100 pixel nella dimensione del font in modo
che il colore verde e la dimensione del carattere di 100 pixel vengano salvati e che l'elemento sia proprio qui.
Quindi tieni d'occhio la prima lettera che aggiorniamo e otteniamo questo gigantesco occhio verde.
Il prossimo fa cambiare il colore degli elementi H-1 in blu quando si passa sopra.
Quindi questo è in realtà abbastanza comune per avere un qualche tipo di effetto.
Quando passi il mouse su qualcosa di solito è piuttosto sottile forse un pulsante
e ti soffi sopra e c'è una piccola ombra che sembra che il colore si sposti leggermente per sembrare una
sorta di prospettiva 3D per qualcosa che ti dia solo un po ' un po 'di interattività senza distrarsi distrarre.
Quindi andremo a selezionare l'H-1 E questo in realtà è tutto ciascuno.
Ma in questo caso è solo uno e lo pseudo-selettore è al
passaggio del mouse e qualsiasi cosa venga inserita qui viene applicata solo quando un utente passa sopra l'elemento.
Quindi color blu risparmiamo.
Ecco il nostro H-1.
E se al passaggio del mouse diventa blu quando smetto di librarsi torna a qualsiasi cosa avesse prima.
Quindi, finalmente, rendi gli elementi che sono stati visitati in grigio e vedendo i due elementi
questi due collegamenti in realtà sono entrambi link a Facebook che sono link che ho visitato in precedenza.
È per questo che sono viola Chrome per impostazione predefinita renderà tutto visto viola.
Quindi mettiamo un link che non ho assolutamente mai visto prima e preparerò
qualcosa per iniziare e ti mostrerò come aggiornare la pagina.
Ora è blu.
Perché non ci sono stato.
Quindi lasciamo in questo modo per ora non ho intenzione di fare clic su di esso.
E vogliamo che quelli visitati siano viola piuttosto che
Mi dispiace che vogliamo che il visitatore sia grigio prima che viola.
Quindi selezioniamo i tag degli pseudo selettori chiamati visitati e quindi faremo il salvataggio in grigio.
E se ci aggiorniamo.
Tieni d'occhio questo qui.
Renderò il carattere un po 'più grande.
Attualmente è viola perché sono stato lì prima di aggiornare.
Adesso è fantastico.
OK quindi spero ti sia piaciuto quell'esercizio.
C'è molto da disfare.
Un sacco di diversi selettori.
E una cosa che aggiungerò è
che per ogni soluzione che ho o quasi ogni singolo ci sono almeno uno o due modi per ottenere lo stesso esatto risultato.
Quindi se tu avessi qualcosa che differiva da me ma funzionava ancora, è grandioso.
Sentiti libero di aggiungere i commenti.
Condividilo con altre persone.
È totalmente valido
Questo è solo il modo in cui l'avrei fatto.
Un'altra cosa
Ovviamente il sito non è particolarmente attraente.
Questo non è un vero sito.
Lavoreremo su un progetto reale molto presto nel prossimo video di esercizio.
In realtà faremo un piccolo blog che è un po 'meglio progettato.
Sembra molto più bello di questo.
Questo è più semplicemente un esercizio di pratica.