Saluti, cari lettori. Negli articoli precedenti, abbiamo studiato principalmente gli attributi di stile CSS. Ce ne sono molti. Alcuni impostano le opzioni del carattere, altre le opzioni dello sfondo e le opzioni del terzo rientro e della cornice.
In questo articolo parleremo dei selettori di stile. In uno degli articoli, abbiamo già toccato. E oggi, diamo un'occhiata ad alcuni altri tipi di selettori che legano implicitamente una regola di stile a un elemento di una pagina web. Questi sono i cosiddetti selettori speciali. Ce ne sono diversi tipi.
combinatoriè un tipo di selettore css che associa una regola di stile a un elemento di una pagina Web in base alla sua posizione rispetto ad altri elementi.
Primo simbolo combinatore più(+) o selettore adiacente. Il plus è impostato tra due selettori:
<селектор 1> + <селектор 2> { <стиль> }
Lo stile in questo caso è applicato a selettore 2, ma solo se è adiacente a selettore 1 e va subito dopo. Considera un esempio:
forte + io (
}
...
Questo è testo normale. Questo miniatura, testo normale, testo rosso
Questo è testo normale. Questo è un testo in grassetto., testo normale, e questo è testo semplice.
Risultato:
Lo stile descritto nell'esempio verrà applicato solo al primo testo racchiuso nel tag. , Perché viene subito dopo il tag .
combinatore tilde(~) si applica anche ai selettori adiacenti, ma questa volta possono esserci altri elementi in mezzo. In questo caso, entrambi i selettori devono essere nidificati nello stesso tag principale:
<селектор 1> ~ <селектор 2> { <стиль> }
Lo stile verrà applicato a selettore 2, che dovrebbe seguire selettore 1. Considera un esempio:
forte~i(
colore rosso; /* Colore testo rosso */
}
...
Questo è testo normale. Questo è un testo in grassetto., testo normale, testo rosso ad esso è stata applicata la regola dei selettori adiacenti.
Questo è testo normale. Questo è un testo in grassetto., testo normale, questo è testo rosso.
Risultato:
Come puoi vedere, questa volta la regola di stile ha funzionato per entrambi i testi racchiusi nel tag , nonostante il fatto che nel secondo caso tra il tag E vale il cartellino .
combinatore > si riferisce a selettori di bambini. Consente di allegare uno stile CSS a un elemento della pagina Web direttamente nidificato all'interno di un altro elemento:
<селектор 1> > <селектор 2> { <стиль> }
Stile sarà legato a selettore 2, che è direttamente annidato in selettore 1.
div > forte(
}
...
Questo è testo normale. Questo è normale testo in grassetto..
E il risultato:
Come puoi vedere nella figura, la regola di stile ha interessato solo il primo tag.
, che è direttamente annidato nel tag
, quindi la regola non si applica ad esso. Quindi considera selettore di contesto<пробел>
. Ti consente di associare uno stile CSS a un elemento nidificato in un altro elemento e può esserci qualsiasi livello di nidificazione: <селектор 1> <селектор 2> { <стиль> } Lo stile verrà applicato a selettore 2 se è in qualche modo annidato selettore 1. Considera l'esempio precedente, solo per Descrizione CSS le regole applicano il selettore di contesto: div forte( Questo è testo normale. E anche questo è testo in grassetto corsivo. testo semplice e solo testo in grassetto Risultato: Come puoi vedere, questa volta la regola ha interessato entrambi i tag.
, anche su quello annidato nel contenitore
. Per etichetta
, che è appena annidato all'interno di un paragrafo
la regola css non funziona. I selettori di attributo sono selettori speciali che associano uno stile a un elemento in base al fatto che un determinato attributo sia presente o abbia un determinato valore. Esistono diversi modi per utilizzare questi selettori. Sembra: <селектор>[<имя атрибута тега>] { <стиль> } E lega lo stile a quegli elementi all'interno dei quali viene aggiunto l'attributo specificato. Per esempio: forte( Automobileè un motore meccanico senza tracce veicolo stradale con almeno 4 ruote. Risultato: Nella figura, puoi vedere che la regola css (colore del testo rosso) è applicata all'elemento forte, a cui viene aggiunto l'attributo titolo. La sintassi per questo selettore è: <селектор>[<имя атрибута тега>=<значение>] { <стиль> } lega stile agli elementi i cui tag hanno un attributo con il specificato nome E Senso. Esempio: UN( Risultato: Come puoi vedere, entrambi gli elementi del tipo di collegamento ipertestuale hanno l'attributo bersaglio, ma al tag viene applicata la regola css che ingrandisce il testo del collegamento di 1,5 volte e ne cambia il colore in rosso
il cui attributo bersaglio ha il significato "_vuoto". Alcuni valori degli attributi possono essere elencati con spazi, come i nomi delle classi. Il seguente selettore viene utilizzato per specificare una regola di stile quando l'elenco dei valori degli attributi contiene il valore desiderato: [<имя атрибута тега>~=<значение>] { <стиль> } Lo stile viene applicato se l'attributo ha il valore richiesto o si trova in un elenco di valori separati da spazi. Per esempio: { Il nostro telefono: 777-77-77 Il nostro indirizzo: Mosca st. Sovietico 5 Ottieni il seguente risultato: La regola viene applicata all'elemento, dove tra i valori degli attributi classe c'è un significato tel. È consentito utilizzare un trattino nei valori di identificatori e classi. Per associare uno stile a elementi i cui valori di attributo possono contenere un trattino, è possibile utilizzare il seguente costrutto: [attributo|="valore"] ( stile ) Lo stile viene applicato a quegli elementi il cui valore di attributo inizia con il valore specificato seguito da un trattino. Per esempio: { Risultato: Nell'esempio, la regola di stile si applica solo agli elementi dell'elenco il cui nome di classe inizia con il valore "menù". Questo selettore imposta lo stile per un elemento se il valore dell'attributo del tag inizia con un certo valore. Ci possono essere due opzioni: [<имя атрибута тега>^=<подстрока>] { <стиль> } Nel primo caso stile si applica a tutti gli elementi i cui tag hanno un attributo con specificato nome e un valore che inizia con specificato sottostringhe. Nel secondo caso, la stessa cosa, solo a determinati elementi specificati in selettore principale. Esempio: UN( Risultato: L'esempio mostra come visualizzare i collegamenti esterni e i collegamenti interni in modo diverso. I collegamenti esterni iniziano sempre con la stringa "http://". Pertanto, nel selettore, indichiamo che lo stile viene applicato solo ai collegamenti che hanno l'attributo href inizia con il valore http://. Associa uno stile agli elementi il cui valore di attributo termina con il testo specificato. Ha la seguente sintassi: [<имя атрибута тега>$=<подстрока>] { <стиль> } Nel primo caso stile si applica a tutti gli elementi che hanno attributo con quanto specificato nome e ha un valore che termina con specificato sottostringa. Nel secondo caso, la stessa cosa, solo per quanto specificato selettori. In questo modo, ad esempio, è possibile visualizzare diversamente formati diversi di immagini grafiche. Per esempio: immagine( immagine gif immagine in formato png Risultato: Nell'esempio, tutte le immagini con estensione gif verranno visualizzate con un bordo rosso spesso cinque pixel. Questo selettore associa lo stile ai tag il cui valore di attributo contiene il testo specificato. Sintassi: [<имя атрибута тега>*=<подстрока>] { <стиль> } Stile si lega agli elementi che hanno attributo con il nome specificato e il suo valore contiene quanto specificato sottostringa. Per esempio: immagine( Immagine dalla cartella della galleria Immagine da un'altra cartella Risultato: Nell'esempio, lo stile viene applicato alle immagini caricate dalla cartella "galleria". Questo è tutto sui selettori di attributi. Tutti i metodi di cui sopra possono essere combinati tra loro: Selettore[attributo1="valore1"][attributo2="valore2"] ( stile ) Inoltre, lascia che ti ricordi gli speciali selettori CSS: Nei seguenti articoli esamineremo anche gli pseudo-elementi e le pseudo-classi, che forniscono un potente strumento di gestione dello stile. Questo è tutto, finché non ci incontreremo di nuovo. Nei sottocapitoli precedenti, abbiamo esplorato la relazione tra i tag in un documento HTML, inclusi i selettori secondari. Ora è il momento di familiarizzare con i selettori fratelli e i selettori vicini. I selettori adiacenti (noti anche come selettori adiacenti) selezionano gli elementi della pagina Web che hanno un genitore comune e sono uno accanto all'altro. Lo stile viene applicato all'ultimo elemento specificato nel selettore. Esempio:
Diciamo che vuoi ogni paragrafo Che viene prima dopo il titolo H1+p ( stile carattere: corsivo; ) Quando scriviamo questa regola, dobbiamo prima specificare il nome del primo vicino, quindi aggiungere il simbolo + e il nome del secondo vicino (quello a cui vogliamo applicare lo stile). Puoi anche creare combinazioni più lunghe. Lo schema per scrivere un selettore è: selettore1+selettore2+…+selettoreN () (lo stile è applicato a selettoreN). Esempi di scrittura: /* Rientro dal paragrafo all'immagine 30px */ p+img ( padding-top: 30px; ) /* Colore verde per il paragrafo che segue h3 insieme a h2 */ h2+h3+p ( color: green; ) I selettori di pari livello (altri nomi: sorella, fratello) consentono di selezionare elementi di una pagina HTML che sono correlati tra loro (ovvero, hanno un genitore comune e sono sullo stesso livello). I selettori di pari livello sono simili ai selettori di pari livello, ma differiscono in quanto lo stile viene applicato a tutti gli elementi del tipo selezionato, non solo al primo. Il carattere tilde ~ viene utilizzato al posto del segno +. Esempio:
cambiamo un po' l'attività precedente e immaginiamo di dover scrivere in corsivo tutti i paragrafi che vengono dopo il titolo H1 ~ p ( stile carattere: corsivo; ) ...e un po' di HTML per esempio:
Dai un'occhiata al codice HTML: lo stile verrà applicato a tutti i tag Che seguono Dopo etichetta A cui verrà applicato lo stile. Si prega di notare che il tag Che è posizionato Sopra Avere un altro genitore Usando i selettori adiacenti (adiacenti), puoi definire lo stile di un elemento quando segue immediatamente un altro elemento (o gruppo di elementi). Funziona con elementi che sono allo stesso livello e hanno un genitore comune. Con i selettori di pari livello, puoi applicare uno stile a tutti gli elementi del tipo selezionato quando seguono immediatamente un altro elemento (o gruppo di elementi). Funziona con elementi che sono allo stesso livello e hanno un genitore comune. Buonasera, cari colleghi, oggi studieremo con voi due in più selettore, che si chiamano selettori css child e neighbor. In misura maggiore, puoi farne a meno, tuttavia, per il tuo sviluppo, devono essere appresi e talvolta applicati in modo che rimangano nella tua memoria. Quindi discutiamo di cosa selettori sono adiacenti e quali sono bambini e lo analizzeremo con un esempio.
Testo in un paragrafo Non più testo figlio in un paragrafo Con l'aiuto degli stili, aggiungeremo lo stesso risultato per il tag span Div > span( P + intervallo ( Il risultato dell'esecuzione del codice in entrambi i casi verrà applicato al tag span, perché è figlio del tag div e subito dopo il tag P. Pertanto, il carattere è diventato due volte più grande e rosso. Ora abbiamo completamente affrontato selettori figlio e vicino nei CSS, e devi solo rafforzare le tue conoscenze nella pratica, a presto! Non molto tempo fa è stata rilasciata una nuova, ottava versione del browser Internet Explorer e tutti i webmaster hanno tirato un sospiro di sollievo. Del resto, finalmente, il browser di Microsoft, seppur con enorme ritardo, ha iniziato a rispettare più o meno le specifiche di HTML e CSS ea visualizzare adeguatamente le pagine web. In generale, tutti se lo aspettavano dalla settima versione. Tuttavia, a prima vista, non ha portato nulla di nuovo, ad eccezione del supporto per l'uso delle schede. Ma questo è solo a prima vista... Poche persone conoscono un'altra innovazione molto significativa in IE7: è stato in questa versione che il browser ha iniziato a supportare nuovi tipi di selettori CSS. Un selettore è la parte di una regola CSS che specifica a quali elementi applicarlo. I loro tipi principali sono noti a quasi tutti i webmaster. Ma non molte persone hanno sentito parlare di tali "esotici" come selettori di bambini e vicini, così come selettori di attributi. Questo perché non aveva senso usarli per molto tempo, perché uno dei browser più popolari, Internet Explorer, non li supportava. Ora però la situazione è cambiata, e non sarebbe molto ragionevole prescindere dalle nuove opportunità che si sono aperte. Ecco perché ho deciso di scrivere questa breve recensione. Selettori adiacenti Specifica che una regola CSS viene applicata a un elemento solo quando è adiacente a qualche altro elemento. Esempio: Gli elementi sono chiamati vicini quando nel codice della pagina loro , e tra di loro non ci sono altri elementi
Ecco i tag adiacenti E , E E . tag E non sono vicini, perché un elemento estraneo è "incuneato" tra di loro . La sintassi per scrivere un selettore adiacente è la seguente: I elemento + II elemento (…) Facciamo una regola del genere per il nostro esempio: forte + em ( colore: rosso; ) Ecco come sarà il risultato: Come puoi vedere, lo stile è cambiato solo per il tag e il tag non è stato influenzato. Questo illustra molto bene la regola di adiacenza. Conduciamo un altro esperimento: sostituiamo nel nostro esempio SU : Gli elementi sono chiamati vicini quando nel codice della pagina loro situati uno accanto all'altro, e tra di loro non ci sono altri elementi
Come puoi immaginare, lo stile del secondo tag Non cambierà: Questo perché non sarà più un vicino per . Selettori di bambini Specifica che la regola CSS viene applicata a un elemento solo quando è figlio di un altro elemento. Esempio: Si dice che un elemento è figlio dell'elemento in cui è nidificato se lo è È diretto discendente questo elemento Qui i bambini sono il tag rispetto all'etichetta E in direzione . Etichetta rispetto all'etichetta Non è un bambino perché non è il suo genitore immediato. La sintassi di scrittura è la seguente: I elemento > II elemento (...) I selettori figlio sono molto simili ai ben noti selettori di contesto, con l'unica differenza che per i selettori di contesto, la profondità di annidamento degli elementi non ha importanza. Per i bambini, la profondità di annidamento non può essere superiore a un livello. Illustriamo tutto ciò stabilendo alcune regole per il nostro esempio: p > Otterremo il seguente risultato: Nel nostro caso, il tag non è figlio di Perché è al secondo livello di nidificazione in esso. Naturalmente, lo stile che dovrebbe rendere il testo blu non ha "funzionato" per lui. Ora sostituiamo il selettore figlio con il selettore di contesto: p > forte ( colore: rosso; ) /* Selettore figlio */ Il risultato è prevedibile: A differenza del selettore figlio, il selettore contestuale "ha funzionato" in questo caso perché non si preoccupa della profondità del livello di annidamento. Selettori di attributi Specifica che la regola CSS viene applicata solo agli elementi che contengono l'attributo specificato nel selettore. Esempio: I CSS sono una tecnologia molto importante, senza la quale è impossibile creare almeno un sito Web decente. I concetti di base dei CSS sono regole di stile, selettori, proprietà e i loro valori. Qui, solo il primo paragrafo ha un parametro autodefinito (o attributo, che è la stessa cosa) align. Pertanto, la regola CSS per il selettore dell'attributo align si applicherà al primo paragrafo e solo ad esso. La sintassi per una voce del selettore di attributo è: [attributo] (...) Facciamo una regola per il nostro esempio (per chiarezza, oltre all'attributo, indicheremo anche il tag stesso, per il quale dovrebbe essere considerato): p ( colore: verde; font-weight: grassetto; ) È facile indovinare cosa accadrà alla fine: Finora ho descritto il cosiddetto semplice selettore di attributi. Per lui è importante solo la presenza di un attributo sul tag, ma il suo valore non è affatto importante. Nel frattempo, ci sono altri tipi di selettori di attributi. Vediamoli brevemente: [attributo="valore"] ( ... ) Si applica solo agli elementi che hanno il valore specificato per questo attributo. [attributo^=”valore”] ( … ) Quasi lo stesso, solo che in questo caso l'attributo dovrebbe iniziare solo con il valore specificato e non necessariamente contenerlo nella sua interezza. [attributo$="valore"] ( ... ) Allo stesso modo, con la differenza che qui l'attributo deve terminare con il valore specificato. [attributo*=”valore”] ( … ) Questa notazione indica che il valore può verificarsi ovunque nell'attributo. Come puoi vedere, i selettori dei vicini, dei figli e degli attributi ci offrono molti nuovi modi per scrivere codice CSS efficiente. Puoi trovare un numero enorme di esempi in cui il loro uso sarebbe preferibile ai ben noti selettori "tradizionali". Pertanto, penso che sarebbe saggio mettere in servizio queste tecniche. Come usarli dipende da te.
. E il genitore immediato del secondo tag
è l'etichetta
font-style: corsivo /* corsivo */
}
...
Questo è testo normale. Questo è un testo corsivo in grassetto.
e al paragrafo
Selettori di attributi di tag
1. Selettore di attributi semplice
colore rosso;
}
...
2. Selettore di attributi con valore
colore rosso;
dimensione del carattere: 150%;
}
...
.ru" target="_blank">Link in una nuova finestra
3. Uno dei diversi valori di attributo
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }
colore rosso;
dimensione del carattere: 150%;
}
...
4. Trattino nel valore dell'attributo
Selettore[attributo|="valore"] ( stile )
colore rosso;
dimensione del carattere: 150%;
}
...
5. Il valore dell'attributo inizia con un testo specifico
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
colore: verde;
font-weight: grassetto;
}
...
6. Il valore dell'attributo termina con un determinato testo
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
bordo: 5px rosso fisso;
}
...
7. Il valore dell'attributo contiene la stringa specificata
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
bordo: 5px rosso fisso;
}
...
Selettori adiacenti
, aveva un carattere corsivo. Questo può essere fatto con questo codice CSS:
Selettori correlati
. Il codice CSS sarà simile a questo:
Titolo 1
Titolo 2
e sono Prima tag di chiusura genitore
. Nella nostra versione, ci sono 3 elementi
non interferirà affatto. Si noti anche che in questo caso lo stile non lo farà applicato a quel tag
, così come al tag
.
conclusioni
selettori figlio css- elementi che si trovano all'interno dell'elemento padre. Un esempio di ciò potrebbe essere il seguente. Abbiamo un blocco contenente un paragrafo, un altro blocco e un'immagine. Questi tre elementi sono i bambini. Se il blocco figlio contiene anche altri elementi, allora non sono più figli del primo blocco, ma sono figli del blocco in cui si trovano direttamente. Spero che tu abbia capito il succo.
Selettori CSS adiacenti- elementi situati uno dopo l'altro nel codice del documento. Un esempio di questo è questo. Abbiamo un paragrafo seguito da un tag span. Tutto è abbastanza chiaro, ma non ci resta che analizzare il tutto con esempi reali.
Testo in span
dimensione carattere : 200%
}
colore rosso
}
strong + ins ( colore: blu; )
p > em (colore: blu; ) /* Selettore figlio */
p em (colore: blu; ) /* selettore di contesto */
Autore dell'articolo: Alexey Antonov, creatore e amministratore del blog sulle tecnologie web www.lounwolf.ru
=====================================================================
Materiali tematici:
Aggiornato: 20/04/2021
103583
Se noti un errore, seleziona una parte di testo e premi Ctrl + Invio
Categorie del sito
