Selettore
Selettore universale

La struttura del codice CSS è simile a questa:

Selettore (proprietà CSS: valore; proprietà CSS: valore; ... ecc.)

In un selettore universale, un asterisco * funge da selettore:

* (proprietà CSS: valore; proprietà CSS: valore; ... ecc.)

Selettore universale, ha effetto su tutti i tag di un documento HTML contemporaneamente.

Ad esempio, puoi rimuovere tutto il riempimento e il riempimento da tutti i tag in un documento HTML:

* (margine: 0; riempimento: 0;)

Supponiamo di avere un documento HTML contenente il seguente codice:

Leopardo delle nevi

nel seguente modo .

Usiamo il selettore universale per rendere il colore del carattere di tutti i tag verde verde, nome del carattere arial, stile del carattere obliquo.

Leopardo delle nevi

Il leopardo delle nevi (irbis, ak leopard) è un grande mammifero felino predatore. Vive nelle catene montuose di Afghanistan, Birmania, Bhutan, India, Kazakistan, Kirghizistan, Cina, Mongolia, Nepal, Pakistan, Russia, Tagikistan e Uzbekistan. L'irbis si distingue per un corpo sottile, lungo e flessibile, zampe relativamente corte, una testa piccola e una coda molto lunga. La lunghezza del leopardo delle nevi con la coda è di 200-230 cm, peso fino a 55 kg. Il colore del pelo è chiaro, grigio fumo con macchie scure a forma di anello o solide.

Il leopardo delle nevi caccia principalmente capre di montagna e montoni; nella sua dieta si trovano anche cinghiali, fagiani e persino roditori. A causa dell'inaccessibilità dell'habitat della specie, i leopardi delle nevi sono ancora poco conosciuti. Tuttavia, secondo stime approssimative, il loro numero varia nella regione di circa 10 mila individui. A partire dal 2013, la caccia ai leopardi delle nevi è generalmente vietata.

La pagina nel browser sarà simile a questa.

Puoi anche sperimentare con il padding, renderlo prima 0 e poi 15px, aggiungerlo al codice CSS.

• L'attività svolta è la selezione di tutti gli elementi. In generale, tutti.
• Designazione - simbolo asterisco - *.
• Esempio di utilizzo:

ripristina i rientri per tutti gli elementi per impostazione predefinita

Scopri di più sul selettore universale

Introdotto nei CSS dalla versione 2. Corrisponde a qualsiasi elemento in. Pertanto, gli stili specificati per il selettore universale vengono applicati a tutti gli elementi contemporaneamente. Per questo motivo, ti consiglio di usarlo con molta attenzione: può creare problemi quando si ereditano gli stili. O meglio, comportamento imprevedibile (per un programmatore inesperto). Considereremo questo punto in modo più dettagliato nella sezione sull'ereditarietà.

Un'altra caratteristica del selettore universale è che quando viene utilizzato in combinazione con un altro selettore (ad esempio, un selettore di classe, identificatore o attributo) come parte di un selettore semplice, può essere ignorato impunemente. È più o meno come dire semplicemente "I dromedari sono cammelli con una gobba" invece di "Tutti i dromedari sono cammelli con una gobba". Il significato non è cambiato.

Esempio:

* .error (color: red;) .error (color: red;) / * queste due regole sono equivalenti. Il selettore universale viene saltato nel secondo caso * /

Area di applicazione

In realtà, è più conveniente utilizzare un selettore universale, come nel primo esempio, per ripristinare i valori iniziali degli stili dipendenti dal browser (in particolare, il rientro).

Ma anche questa applicazione non si rivelerà sempre una buona idea. A causa delle carenze del selettore universale descritto in questo articolo, è meglio usarlo. Cioè, usa i selettori di tipo.

Quindi senza problemi tu ed io siamo passati al prossimo argomento. Con il selettore universale, a quanto pare, ha risolto il problema. È ora di andare avanti. Prossima fermata - .

Ciao cari lettori del sito blog. Oggi continueremo a riempire il nostro di materiali e inizieremo a parlare di una cosa così fondamentale come i selettori nel linguaggio CSS.

Ne esistono sette tipi: tag, classe, Id, universale, attributi, nonché pseudo-classi e pseudo-elementi. Un po' troppo, vero? Bene, niente, li analizzeremo lentamente tutti, e con ciò, usando esempi dettagliati.

In pubblicazioni precedenti, abbiamo già preso in considerazione e fatto conoscenza con le unità di dimensioni, così come abbiamo appreso i principi dell'ereditarietà nei CSS. Ebbene, oggi, come dicevo, apriamo un capitolo molto serio nello studio del linguaggio di markup di stile.

Tag CSS e selettori di classe

Prima di studiare le regole di stile, bisognerà imparare come e con quali principi impostare quelle etichette con cui il browser capirà a quali elementi del codice Html devono essere applicate. Ci sono diversi selettori. I più semplici, dal punto di vista della comprensione, utilizzano i nomi dei tag ai quali dovranno essere applicate le regole CSS scritte dopo di essi.

Questo esempio utilizzerà il rosso per il colore del carattere e il grigio per il riempimento dello sfondo per tutti i tag P del paragrafo. Qualsiasi regola CSS può avere più selettori contemporaneamente. Come dovranno essere letti in questo caso? È sempre da destra a sinistra, cioè. iniziare dal punto più vicino alla parentesi graffa di apertura.

Nell'esempio sopra, la prima riga mostra un selettore di tag (elemento) che indica il colore del carattere come rosso per tutti i Div.

Contenuto di un normale contenitore Div

Nella seconda riga, vediamo un esempio di un selettore complesso, in cui abbiamo un nuovo elemento come classe (classe)... È prescritto in termini di qualità. Come valore per la classe, possiamo usare un nome arbitrario usando i simboli ,,, [_], [-].

Ma oltre alla classe, Id viene utilizzato anche nel linguaggio di markup di stile. Qual è la differenza tra classe e Id? Il valore di quest'ultimo deve essere unico, poiché L'ID è un identificatore univoco per il tag Html e il suo nome (valore) può essere utilizzato una sola volta nel codice.

E il valore per class non è univoco e può essere utilizzato per qualsiasi numero di elementi nel codice. Quelli. tag diversi (Div, P, H1, ecc.) possono avere lo stesso valore per il loro attributo di classe:

Come viene utilizzato nei selettori CSS? Si scopre che il suo nome è scritto punteggiato in avanti.

Pertanto, quando vediamo qualcosa che inizia con un punto nel codice CSS, capiamo subito che stiamo parlando di una classe. Se consideriamo l'esempio mostrato nello screenshot, ora in tutti gli elementi del codice Html, dove verrà scritto “class” con il valore “Blue”, il testo sarà colorato di blu.

Ma questo non accadrà affatto perché abbiamo scelto il nome della classe "Blue". Puoi chiamarlo come preferisci (anche "xyz") e il colore nel nostro esempio è impostato esattamente come assegnato al selettore con questa classe. Spero che questo sia chiaro? Cambiamo il nome (valore) della classe nell'esempio:

Paragrafo con testo

Paragrafo con testo

Quelli. ora abbiamo la classe XYZ e la regola scritta per essa:

Xyz (colore: blu)

colorato di blu il testo del paragrafo. Questo esempio sottolinea ulteriormente che nome per l'attributo di classe qualsiasi può essere utilizzato. Tuttavia, continuiamo.

Diamo un'altra occhiata a un esempio di come vengono usati i tag e i selettori di classe nei CSS. Immaginiamo di avere le seguenti regole di stile:

Div (colore: rosso) div.a123 (colore: verde) .xyz (colore: blu)

E immagina anche che nel codice Html abbiamo i seguenti elementi:

In conformità con le regole prescritte per i selettori specificati, il contenuto degli elementi forniti del codice HTML dovrebbe essere simile al seguente:

Vediamo ora perché questo è il modo in cui il browser ha interpretato lo stile di questi elementi del codice Html. Per il primo contenitore Div, in cui non è scritta alcuna classe, si applicherà la regola CSS applicabile a tutti i contenitori: div (colore: rosso). Pertanto, il suo contenuto sarà colorato di rosso. Cosa doveva essere mostrato.

Nel tag del secondo Div abbiamo registrato la classe "a123". In questo caso, verranno applicate le regole CSS corrispondenti a "div.a123" (perché abbiamo solo un tag Div con l'attributo class = "a123" scritto in esso). Pertanto, il contenuto del secondo contenitore sarà colorato di verde.

Ma probabilmente avrai notato che la prima regola CSS "div (color: red)" può essere applicata anche al secondo Div, poiché è destinata a tutti i contenitori senza eccezioni. Si scopre una contraddizione, che si risolve nei CSS introducendo un concetto.

Ne parleremo in dettaglio un po' più avanti, ma per ora dirò solo che la priorità di "div.a123" (per il secondo Div in questo esempio) sarà più alta.

A proposito, una situazione simile si verifica con il terzo Div del nostro esempio. Due opzioni sono adatte contemporaneamente: il selettore di tag "div" e il selettore di classe ".xyz". Anche in questo caso, per motivi che non ho ancora spiegato (leggi di questo al link appena sopra), la priorità di quest'ultimo sarà maggiore, quindi il contenuto del terzo contenitore sarà colorato di blu.

Andiamo avanti. Nell'esempio sopra, abbiamo il tag di paragrafo successivo P, che è scritto class = "a123". Si scopre che questo elemento non rientra in nessuno dei tre selettori che abbiamo scritto (tutti e tre lo hanno mancato).

Ha solo una sovrapposizione con la seconda opzione, ma questo selettore verrà utilizzato solo per i tag Div con classe a123, non per il tag di paragrafo P. Di conseguenza, il colore del testo in questo paragrafo rimarrà quello predefinito, ad es. Nero.

Più avanti nell'esempio, abbiamo un elemento di paragrafo con class = "xyz". Ad esso verrà applicata l'ultima regola CSS ".xyz (color: blue)". Pertanto, il testo in questo paragrafo sarà colorato di blu. Qui credo sia tutto chiaro.

Selettore generico e ID univoco

Passiamo ora agli Id, di cui ho già parlato. Quando vediamo qualcosa nel codice CSS la griglia anteriore (hash), allora questo significa che abbiamo a che fare con Id:

Tipicamente questo selettore è scritto senza menzionare il tag, a cui si riferisce (la prima opzione nell'esempio appena sopra), sebbene anche la seconda opzione di ortografia sia accettabile, ma è usata raramente. Ciò è dovuto al fatto che il valore dell'attributo Id nel codice sarà univoco, il che significa che non possono esserci due elementi con gli stessi valori Id. Quelli. non ha senso specificare, anche se questo non è vietato.

Pertanto, di solito scrivono solo un hash (reticolo) e subito dopo il valore (nome) dell'attributo Id. Supponiamo di avere la seguente regola per Id:

#schiena (colore: rosso)

e il codice contiene il seguente frammento:

che, a seguito dell'applicazione della regola dopo "#back", verrà interpretata dal browser come segue:

Contenitore Div con ID univoco

Inoltre, CSS prevede selettore universale indicato da un asterisco, che mostra che questa regola si applicherà in generale a qualsiasi elemento del codice:

* (colore nero)

In questo caso, il testo racchiuso in qualsiasi tag sarà nero (il colore predefinito). È chiaro che tutti gli altri selettori (tag, classi e Id) avranno una priorità maggiore rispetto a quello universale.

Selettori di attributi e il loro futuro nei CSS moderni

Tutte le opzioni sopra descritte (tag, classe, Id e generico) funzioneranno assolutamente in tutti i browser. Ma ci sono altre opzioni che non funzionano ovunque.

Questo tipo include selettori di attributi, che sono molto convenienti e consentono di espandere significativamente e allo stesso tempo semplificare le possibilità di azione del punto su, ma che, sfortunatamente, non supportato al 100% da tutti i browser.

Come probabilmente ricorderai, nel linguaggio Html all'interno dei tag, possiamo utilizzare vari attributi che ci permettono di attribuire determinate proprietà al contenuto di questi elementi stessi. Pertanto, sarebbe logico utilizzare non solo i nomi dei tag come selettori nei CSS, ma anche i nomi degli attributi.

In realtà, lo abbiamo già fatto quando abbiamo considerato class e Id, perché erano essenzialmente attributi di alcuni tag. È solo che Aidi e Klass sono molto importanti nel layout e sono stati presi in gruppi separati, ognuno con la propria sintassi.

E come utilizzare altri attributi esistenti nel linguaggio Html (non Id e non classe) nei selettori? Abbastanza semplice - racchiuderli tra parentesi quadre:

(colore: verde)

Ora qualsiasi tag nel codice Html, che avrà "title", avrà il colore del testo verde.

Molto comodo secondo me. Ma l'intero problema con l'utilizzo dei selettori di attributo è che in IE 6 e precedenti non funzionano in generale, oppure funzionano, ma solo in parte. Fino a quando la percentuale di utenti che navigano in Internet utilizzando IE 6 non sarà pari a zero, è improbabile che questo metodo conveniente venga ampiamente utilizzato nel layout. Tuttavia, è necessario conoscere la loro esistenza ed essere in grado di usarli.

Come puoi vedere dall'esempio, non importa se l'attributo specificato nel selettore ha un valore o è vuoto. Ma questo è lontano da tutto ciò che si può fare con lui, perché questa è solo una canzone.

Puoi indicare in loro non solo il nome dell'attributo, ma anche il suo valore:

(colore: verde)

Di conseguenza, le regole CSS scritte per tale selettore verranno applicate solo per il tag che ha "titolo" con il valore "Primo paragrafo" (nel nostro esempio, questa sarà la seconda riga):

L'esempio descritto era l'uguaglianza rigorosa, ma puoi scrivere questo selettore in questo modo:

(colore: verde)

Quella. questa regola CSS si applicherà solo a quegli elementi del codice Html che hanno la parola "paragrafo" nel loro "titolo" (nel nostro esempio, queste saranno la seconda e la terza riga):

Interpreta la sintassi del selettore di attributo «~=» come "contiene l'intera parola". Ad esempio, per un elemento con titolo = "(! LANG: Il secondo paragrafo" CSS правило «color:green» уже применяться не будет.!}

Ma puoi invece mettere «*=» e quindi verranno prese in considerazione non solo le singole parole specificate nel selettore, ma anche parti di parole (qualsiasi pezzo di testo contenuto in qualsiasi punto dell'attributo):

(colore: verde)

In questo caso e per l'elemento con titolo = "(! LANG: Il secondo paragrafo" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (tutto ciò che inizia con il valore tra parentesi), che aiuta a creare un selettore di attributi come questo:

(colore rosso)

Probabilmente ricorderai che l'attributo è quello di indicare. Quindi, molto spesso i collegamenti interni al sito vengono resi relativi e i collegamenti esterni, altrimenti, come renderli assoluti, non funzioneranno.

Pertanto, tutti i collegamenti esterni inizieranno con "http" e i collegamenti interni possono essere specificati in forma relativa senza utilizzare "http". Quella. il selettore scritto nel nostro esempio consentirà colora tutti i link esterni del sito(tutti assoluti) in rosso. Bene, quelli relativi che non contengono "http" rimarranno nel colore predefinito. Secondo me super!!!

Come puoi vedere, i selettori di attributi ci danno molte possibilità e il fatto che non siano ancora ampiamente utilizzati è merito di una società molto povera e offesa Melkosoft, e in particolare della loro idea IE 6. Ma lentamente iniziano a essere utilizzati in CSS e presto, ovviamente, si faranno strada nella vita.

Sì, c'è un altro operatore «$=» - tutto ciò che termina con il valore citato:

(colore: verde)

Di conseguenza, la seconda e la terza riga del nostro primo esempio saranno colorate in verde. i valori "titolo" finiscono con "raf". Questo è il modo in cui i selettori di attributi funzionerebbero meravigliosamente nei CSS moderni se non fosse per una certa percentuale di utenti di IE 6.

In realtà, di tutti i tipi, ci resta da considerarne solo due:. Ma voglio riportarlo al prossimo articolo, dove parleremo anche delle loro varie combinazioni.

Buona fortuna a te! A presto sulle pagine del sito blog

Potresti essere interessato

Selettori di pseudo-classi e pseudo-elementi in CSS (hover, first-child, first-line e altri), relazioni tra tag nel codice Html
Priorità CSS e Boosting con Importante, Selettore Combinazione e Raggruppamento, Stili Personalizzati e Autore
Stile elenco (tipo, immagine, posizione) - Regole CSS per personalizzare l'aspetto degli elenchi nel codice Html
Sfondo in CSS (colore, posizione, immagine, ripetizione, allegato) - tutto per impostare il colore di sfondo o l'immagine di sfondo degli elementi HTML
CSS: cos'è, come i fogli di stile a cascata sono collegati al codice html usando Style e Link
Unità di misura (pixel, em ed ex) ed ereditarietà delle regole CSS
A cosa servono i CSS, come collegare fogli di stile a cascata a un documento Html e le basi della sintassi di questo linguaggio
Padding, Margin and Border - imposta in CSS i margini interni ed esterni, nonché i bordi per tutti i lati (superiore, inferiore, sinistro, destro) Come impostare il colore di sfondo alternato di righe di tabelle, elenchi e altri elementi Html su un sito utilizzando la pseudo-classe nth-child
Come trovare e rimuovere le linee di stile inutilizzate (selettori aggiuntivi) nel file CSS del tuo sito
Display (block, nessuno, inline) in CSS - imposta il tipo di visualizzazione degli elementi Html sulla pagina web

A volte, durante la creazione di un sito, diventa necessario applicare uno stile specifico a tutti gli elementi che si trovano nella pagina, senza eccezioni. Per eseguire questa operazione, viene utilizzato un selettore universale.

Descrizione

È indicato come un simbolo "*". Con il suo aiuto, puoi selezionare tutti i tag sulla pagina contemporaneamente senza apportare correzioni per il loro scopo e nidificazione. Per esempio:

* (dimensione carattere: 18px;)

Con questa voce, abbiamo assegnato a tutti gli elementi con testo un'altezza del carattere di 18 pixel.

Diamo un'occhiata più da vicino. Fino alla seconda versione di CSS, non esisteva un selettore universale. Corrisponde a tutti gli elementi, quindi gli stili che avrà verranno applicati a loro contemporaneamente. Fare molta attenzione quando si utilizza questo selettore. Questa cautela è causata dal possibile verificarsi di difficoltà nell'ereditarietà degli stili, o meglio, dal loro comportamento imprevedibile.

Vale anche la pena notare che l'uso di una classe, identificatore, attributo consente di saltare il selettore universale senza alcun danno. Per esempio:

*. a sinistra (bordo: 1px solido # 000;). a sinistra (bordo: 1px solido # 000;)

Queste voci hanno lo stesso carico semantico e lo stile verrà applicato allo stesso modo sia con che senza il selettore universale.

Dove può essere applicato?

Fondamentalmente, il selettore universale si trova in pratica quando si azzerano gli stili di browser predefiniti. Ad esempio, riempimento, dimensioni dei caratteri e così via.

Tuttavia, sebbene questo metodo sia semplice e riduca anche significativamente la lunghezza del codice, presenta una serie di svantaggi.

Svantaggi del selettore universale quando si eliminano gli stili standard:

• alcuni stili non possono essere ripristinati
• per l'attributo select non può azzerare il riempimento
• può "eliminare" l'aspetto standard del pulsante nella maggior parte dei browser
• Mozila funziona con bug minori nel browser
• rallenta notevolmente il caricamento della pagina per Mozila (tuttavia, questo vale per i siti con CSS più di mille righe, altrimenti il ​​ritardo è invisibile.)

Per i motivi sopra descritti, si consiglia di eseguire il dump degli stili in modo specifico per ciascun elemento utilizzando un selettore di tipo. Alla fine viene fornito un esempio di codice simile per il ripristino degli stili.

Il selettore CSS generico è forse il più facile da capire, poiché specifica che gli stili verranno applicati a tutti gli elementi senza eccezioni. Un selettore universale è costituito da un solo carattere - un asterisco (*), la sintassi generale è la seguente:

* { costo dell'immobile; costo dell'immobile; ...)

Un esempio di utilizzo del selettore generico CSS

Paragrafo 1

Paragrafo 2

Paragrafo 3

Risultato nel browser

Paragrafo 1

Paragrafo 2

Paragrafo 3

In questo esempio, i margini, il riempimento e i bordi degli elementi della pagina sono stati rimossi. Cosa serve? Come già saprai dalla lezione , alcuni elementi HTML inizialmente hanno determinati valori di alcune proprietà, ad esempio i paragrafi hanno margini superiore e inferiore di spazio bianco diversi da zero, i collegamenti di immagine hanno cornici, ecc. Ma non tutto è così semplice, il fatto è che in diversi browser la dimensione di questi campi potrebbe differire leggermente e alcuni non hanno impostato i frame predefiniti per i collegamenti alle immagini per molto tempo. E queste non sono tutte differenze possibili.

Quindi, molti progettisti di layout (e ora stai imparando esattamente il layout) creano i cosiddetti "Ripristina stili CSS", ovvero, all'inizio del foglio di stile, ripristinano tutti i possibili valori CSS diversi da zero e quindi, in il processo, aggiungere stili agli elementi, ma già, ovviamente, con i suoi significati. In questo modo puoi essere sicuro che la pagina HTML avrà lo stesso aspetto in tutti i browser.

Molto spesso, il selettore universale viene utilizzato per ripristinare gli stili, anche se alcuni preferiscono semplicemente elencare alcuni selettori di tag separati da virgole, e altri non usano affatto il ripristino, affidandosi alle loro cure. Come agirai dipende da te, ma in ogni caso è troppo presto per pensarci. E stai certo che nel tempo svilupperai il tuo stile di scrittura (scusami per la tautologia), quindi non preoccuparti di questo.

Compiti a casa.

Non vedo alcun motivo per fare i compiti sul selettore universale, poiché qui è tutto troppo ovvio, quindi facciamo un po' diversamente.

1. Modifica gli stili del tag in modo che assomigli a un paragrafo. Di quale proprietà hai bisogno per questo, pensa tu stesso.
2. Modifica il tag del paragrafo in modo che assomigli al tag di evidenziazione per le virgolette lunghe.
3. Converti un tag da un elemento in linea a un elemento di blocco. Usa la proprietà per questo