Ora prova a capire come evidenziare il punto 2.

Soluzione 1

Ul:first-of-type > li:nth-child(2) ( peso-carattere: grassetto; )

Soluzione 2

P + ul li:last-child ( peso-carattere: grassetto; )

Soluzione 3

Ul:first-of-type li:nth-last-child(1) ( peso-carattere: grassetto; )

Compatibilità

• IE9+
• Firefox 3.5+
• safari
• musica lirica

I selettori CSS sono una delle caratteristiche principali del linguaggio CSS. I selettori consentono di fare riferimento sia a un gruppo di elementi, sia a uno solo di essi.

Selettori nei CSS

I selettori vengono utilizzati per indicare al browser quali elementi applicare gli stili descritti tra parentesi graffe.

P(
Stili…
}

In questo caso il selettore è p, il tag del paragrafo. Tale regola aggiungerà stili a tutti i paragrafi della pagina web.

Cosa sono i selettori CSS?

Il selettore dei tag è il più semplice. È stato mostrato in un esempio. Per scriverlo in CSS è necessario scrivere il nome del tag senza parentesi angolari. Gli stili verranno applicati a tutti gli elementi con quel tag.
Table(): stili per tutte le tabelle
Li() - stili per tutti gli elementi dell'elenco
A() - stili per tutti i collegamenti

Classe di stile Puoi allegare una classe di stile a qualsiasi elemento su una pagina web. Anche per una lettera. Quindi, nel file css, puoi fare riferimento a questo elemento scrivendo i tuoi stili personalizzati. Per fare ciò, metti un punto e scrivi dopo il nome della classe di stile. Esempi:
.about() - le regole verranno applicate a tutti gli elementi che hanno l'attributo class = "about"
.down() - le regole verranno applicate a tutti gli elementi che hanno l'attributo class = "down"
.float() - le regole verranno applicate a tutti gli elementi che hanno l'attributo class = "float"

Come puoi vedere, la cosa principale è porre fine a tutto ciò. Una classe di stile può essere associata a un numero illimitato di elementi. Un elemento può avere più classi.

Identificatoreè un altro tipo di selettore. Un identificatore può essere assegnato a un solo elemento. Non può avere due ID e l'ID associato a questo elemento non può essere specificato altrove.

È impostato così:

Paragrafo

Cioè, proprio come una classe, viene utilizzato solo l'attributo id qualsiasi parola viene utilizzata come valore.

Per fare riferimento a un elemento con un id tramite css, è necessario scrivere il valore id e anteporre un hash.

#Primo(
dimensione carattere: 22px
}

Rimandiamo al par id = primo. Lo stile verrà applicato solo ad esso. Il resto dei paragrafi non modificherà la dimensione del carattere.

I CSS contengono regole di stile che vengono interpretate dal browser e quindi applicate agli elementi appropriati nel documento. Una regola di stile è composta da tre parti:

• Selettoreè il tag HTML a cui verrà applicato lo stile. Può essere qualsiasi tag, ad esempio,

  O eccetera.

  Proprietàè il tipo di attributo del tag HTML. In poche parole, tutti gli attributi in HTML vengono convertiti in proprietà CSS. Possono essere colori, bordi, riempimento, ecc.

  Senso- impostato su una proprietà. Ad esempio, la proprietà color potrebbe essere verde, #008000 e così via.

  La sintassi per i selettori nei CSS è la seguente:

  Selettore (proprietà: valore)

  Esempio. Puoi impostare il bordo della tabella in questo modo:

  Tabella (bordo: 2px solido #FF8C00;)

  Qui la sintassi del selettore è: table è il selettore, border è la proprietà e 2px solid #FF8C00 è il valore di quella proprietà.

  È possibile definire i selettori in vari modi in base alle proprie esigenze. Di seguito sono riportate le tipologie di selettori.>

  Selettori standard

  Questo è lo stesso selettore che hai visto sopra. Ancora un altro esempio per dare colore a tutte le intestazioni di primo livello:

  H1 (colore: #8B4513;)

  Selettori universali

  Invece di selezionare elementi di un tipo specifico, il selettore universale abbina semplicemente il nome di qualsiasi tipo di elemento:

  * (colore: #808080;)

  Questa regola rende in grigio il contenuto di ogni elemento del nostro documento.

  Selettori discendenti o selettori nidificati

  Supponiamo che tu voglia applicare una regola di stile a un determinato elemento solo quando si trova all'interno di un determinato elemento, quindi i selettori nidificati o discendenti ti aiuteranno in questo. Come mostrato nell'esempio seguente, la regola di stile verrà applicata all'elemento solo quando è all'interno di un tag

  .

  Ul em (colore: #CD5C5C;)

  Selettori di classe

  Puoi impostare regole di stile per gli elementi in base all'attributo class. Tutti gli elementi che hanno questa classe verranno formattati secondo la regola definita.

  Blu (colore: #0000FF;)

  classe="blu". Puoi rendere il selettore della classe un po' più specifico. Per esempio:

  H1.blu (colore: #0000FF;)

  con attributo classe="blu".

  È possibile applicare più selettori di classe allo stesso elemento. Considera il seguente esempio:

  Questo paragrafo sarà formattato con le classi centro E grassetto.

  Selettori ID

  Puoi impostare regole di stile per gli elementi in base all'attributo id. Tutti gli elementi che hanno questo ID verranno formattati secondo la regola definita.

  #blu (colore: #0000FF; )

  Questa regola rende il contenuto in blu nel nostro documento per ogni elemento con l'attributo id="blu". Puoi rendere il selettore ID un po' più specifico. Per esempio:

  H1#blu (colore: #0000FF; )

  Questa regola visualizza il contenuto in blu solo per gli elementi

  con attributo id="blu".

  Il vero potere dei selettori ID è quando vengono utilizzati come base per i selettori figli, in questo modo:

  #blu h2 (colore: #0000FF;)

  In questo esempio, tutte le intestazioni di secondo livello verranno visualizzate in blu quando si trovano nei tag con l'attributo id="blu".

  Selettori bambini

  Conosci già i selettori discendenti. Esiste un altro tipo di selettore che è molto simile ai selettori figlio ma ha funzionalità diverse, il selettore figlio. Considera il seguente esempio:

  Corpo > p ( colore: #0000FF; )

  Questa regola renderà tutti i paragrafi in blu se sono figli diretti . Altri paragrafi inseriti all'interno di altri elementi di tipo

  O

  Selettori adiacenti Gli elementi HTML che si susseguono sono chiamati vicini. Considera il seguente esempio: Forte + em ( colore: #0000FF; ) Questa regola mostrerà il contenuto del tag in blu se viene dopo l'elemento . Altri tag , non successivo al tag , non avrà alcun effetto su questa regola. Selettori di attributi Puoi anche applicare stili agli elementi HTML con attributi specifici. La seguente regola di stile corrisponderà a tutti gli elementi di input che hanno un attributo type con un valore text: Ingresso (colore: #0000FF;) Il vantaggio di utilizzare i selettori di attributo è che l'elemento non cambia e il colore viene applicato solo ai campi di testo desiderati. Per un selettore di attributi si applicano le seguenti regole: p - seleziona tutti gli elementi del paragrafo con l'attributo lang. p - seleziona tutti gli elementi del paragrafo in cui l'attributo lang è esattamente "ru". p - seleziona tutti gli elementi del paragrafo in cui l'attributo lang contiene la parola "ru". p - Seleziona tutti gli elementi del paragrafo in cui l'attributo lang contiene valori che sono esattamente "ru" o iniziano con "ru". Alcune regole di stile Potrebbe essere necessario definire più regole di stile per un singolo elemento. Puoi impostare queste regole per combinare più proprietà e valori corrispondenti in un unico blocco, come mostrato nell'esempio seguente: H1 ( colore: #00CED1; spaziatura tra lettere: .2em; trasformazione testo: minuscolo; margine inferiore: 2em; peso carattere: 700; ) Tutte le coppie di proprietà e valori sono separate da un punto e virgola (;). È possibile memorizzarli su una o più righe. Per una migliore leggibilità, tenerli su righe separate. Non preoccuparti per le proprietà menzionate nel blocco precedente. Queste proprietà verranno spiegate nelle lezioni successive. Raggruppamento di selettori nei CSS Puoi definire lo stile di molti selettori, se lo desideri. Basta separare i selettori con una virgola, come mostrato nell'esempio seguente: H1, h2, h3 ( colore: #00CED1; spaziatura tra lettere: .2em; trasformazione testo: minuscolo; margine inferiore: 2em; peso carattere: 700; ) Questa regola di stile verrà applicata agli elementi h1, h2 e h3. L'ordine dell'elenco quando si raggruppano i selettori non ha importanza. A tutti gli elementi nel selettore verranno applicate le rispettive dichiarazioni. Puoi raggruppare insieme diversi ID di selettore come di seguito: #header, #content, #footer ( posizione: assoluta; larghezza: 300px; sinistra: 250px; ) Questo articolo si concentrerà sui selettori CSS. Verranno presi in considerazione sia i vecchi selettori CSS, supportati anche da IE6, sia i selettori CSS3 completamente nuovi, che supportano solo le ultime versioni dei browser. Quindi, cominciamo. 1. * (margine: 0; riempimento: 0;) Cominciamo con le cose più semplici, per poi passare alle cose più avanzate. Questo selettore CSS seleziona ogni elemento della pagina. Molti sviluppatori lo utilizzano per reimpostare i margini e i riempimenti di tutti gli elementi. A prima vista, questo è conveniente, ma è comunque meglio non farlo nel codice di produzione. Questo selettore CSS è troppo pesante per il browser. * può essere utilizzato anche per evidenziare gli elementi secondari. #container * (bordo: 1px nero pieno;) In questo caso vengono selezionati tutti gli elementi figlio di #container. Ancora una volta, cerca di non abusarne. Compatibilità IE6+ Firefox Cromo safari musica lirica 2. #X contenitore (larghezza: 960px; margine: automatico;) Il segno cancelletto davanti al selettore CSS X selezionerà l'elemento con id = X. Questo è molto semplice, ma fai attenzione quando usi id. Chiediti: devo assolutamente selezionare in base all'ID? Lo stile id è collegato direttamente all'elemento e non è riutilizzabile. È preferibile utilizzare classi, nomi di tag o anche pseudo-classi. Compatibilità IE6+ Firefox Cromo safari musica lirica 3.X errore (colore: rosso;) Questo è il selettore CSS della classe X. La differenza tra id e classe è che la stessa classe può avere più elementi sulla pagina. Utilizza le classi quando desideri applicare uno stile a più elementi dello stesso tipo. Quando usi id, dovrai scrivere uno stile per ogni singolo elemento. Compatibilità IE6+ Firefox Cromo safari Cromo 4. X Y li a (decorazione del testo: nessuna;) Il selettore figlio CSS è il più comune. Se devi selezionare elementi di un certo tipo da molti elementi figlio, utilizza questo selettore. Ad esempio, vuoi evidenziare tutti i collegamenti presenti nell'elemento li. In questo caso, utilizzare questo selettore. Non creare selettori di visualizzazione CSSX Y Z A Errore B. Chiedetevi sempre se sia necessario scrivere un selettore CSS così macchinoso per selezionare un dato elemento. Compatibilità IE6+ Firefox Cromo safari Cromo 5.X a ( colore: rosso; ) ul ( margine sinistro: 0; ) Cosa succede se vuoi estendere tutti gli elementi di un determinato tipo su una pagina? Mantienilo semplice, usa il selettore del tipo CSS. Se devi evidenziare tutti gli elenchi non ordinati, usa ul () . Compatibilità IE6+ Firefox Cromo safari musica lirica a:link ( colore: rosso; ) a:visted ( colore: viola; ) Utilizziamo la pseudo-classe :link per evidenziare tutti i collegamenti su cui non è stato ancora fatto clic. Se dobbiamo applicare un certo stile ai link già visitati, allora utilizziamo la pseudo-classe :visited. Compatibilità IE7+ Firefox Cromo safari musica lirica 7.X+Y ul + p (colore: rosso;) Seleziona l'elemento successivo. Sceglierà soltanto l'elemento di tipo Y che viene immediatamente dopo l'elemento X. Nell'esempio il testo del primo paragrafo dopo ogni ul sarà rosso. Compatibilità IE7+ Firefox Cromo safari Cromo 8. X>Y div#contenitore > ul ( bordo: 1px nero pieno; ) La differenza tra il valore predefinito X Y e X > Y è che il selettore CSS in questione selezionerà solo gli elementi figlio immediati. Ad esempio, considera il codice seguente. Voce dell'elenco elemento figlio Voce dell'elenco Voce dell'elenco Voce dell'elenco Il selettore CSS #container > ul selezionerà solo uls che sono figli immediati del div con id =container . Non selezionerà, ad esempio, uls che sono figli del primo li . Pertanto, puoi ottenere un vantaggio in termini di prestazioni utilizzando questo selettore CSS. In effetti, questo è particolarmente consigliato quando si lavora con jQuery o altre librerie che selezionano elementi in base alle regole di selezione CSS. Compatibilità IE7+ Firefox Cromo safari musica lirica 9.X~Y ul ~ p (colore: rosso;) Questo selettore CSS è molto simile a X + Y, tuttavia è meno rigido. Usando ul + p verrà selezionato solo il primo elemento dopo X. In questo caso, verranno selezionati tutti gli elementi p che precedono ul. Compatibilità IE7+ Firefox Cromo safari musica lirica 10.X a (colore: verde; ) Puoi anche utilizzare gli attributi nei selettori CSS. Ad esempio, in questo esempio abbiamo selezionato tutti i collegamenti che hanno l'attributo titolo. Il resto dei collegamenti rimarrà inalterato. Compatibilità IE7+ Firefox Cromo safari musica lirica 11.X a (colore: #ffde00; ) Si noti che le virgolette. Non dimenticare di fare lo stesso con jQuery e altre librerie JavaScript in cui gli elementi vengono selezionati dai selettori CSS. Utilizza sempre i selettori CSS3 CSS quando possibile. Buona regola, ma troppo severa. Cosa fare se il collegamento non porta direttamente a , ma ad esempio a ? In questi casi possiamo usare le espressioni regolari. Compatibilità IE7+ Firefox Cromo safari Cromo 12.X un (colore: #1f6053;) Compatibilità IE7+ Firefox Cromo safari musica lirica 13.X a ( background: url(percorso/a/esterno/icona.png) nessuna ripetizione; riempimento a sinistra: 10px; ) Ti sei mai chiesto come fanno alcuni siti web a visualizzare una piccola icona accanto ai collegamenti esterni? Sono sicuro che li hai già visti, sono ben ricordati. “^” è il carattere più comunemente utilizzato nelle espressioni regolari. Viene utilizzato per contrassegnare l'inizio di una riga. Se vogliamo catturare tutti i tag il cui href inizia con http, dobbiamo utilizzare il selettore CSS sopra. Tieni presente che non stiamo cercando "http://". Ciò non è corretto perché gli indirizzi che iniziano con https:// non vengono presi in considerazione. Ma cosa succede se vogliamo dare uno stile solo ai collegamenti che portano a una foto? Ho bisogno di trovare FINE linee. Compatibilità IE7+ Firefox safari musica lirica 14.X a (colore: rosso; ) Ancora una volta, utilizziamo il carattere dell'espressione regolare "$" per contrassegnare la fine della stringa. In questo, stiamo cercando collegamenti che rimandano a file jpg o URL che terminano con ".jpg". Compatibilità IE7+ Firefox safari musica lirica 15.X a(colore: rosso; ) Come scriviamo ora un selettore CSS che selezioni i collegamenti a tutti i tipi di immagini? Ad esempio potremmo scrivere così: A, a, a, a (colore: rosso;) Ma questo è inefficiente. Un'altra possibile soluzione è utilizzare attributi personalizzati. Perché non aggiungiamo il nostro attributo tipo di file di dati ad ogni collegamento? Collegamento immagine A (colore: rosso;) Compatibilità IE7+ Firefox safari musica lirica 16.X a (colore: rosso;) a (bordo: 1px nero pieno;) Ed ecco qualcosa di speciale. Non tutti conoscono questo selettore CSS. La tilde (~) consente di selezionare un attributo specifico da un elenco di attributi separati da virgole. Ad esempio, possiamo impostare il nostro attributo data-info, che contiene diverse parole chiave separate da uno spazio. Quindi possiamo indicare che il collegamento è esterno e che rimanda a un'immagine. cliccami Ecco, il codice Html è a posto, ora scriviamo gli stili. Non male, vero? Compatibilità IE7+ Firefox safari musica lirica 17.X:selezionato input:selezionato (bordo:1px nero pieno;) Questa pseudo-classe evidenzia solo gli elementi dell'interfaccia utente come un pulsante di opzione o una casella di controllo. E quelli contrassegnati / selezionati. Molto semplice. Compatibilità IE9+ Firefox safari musica lirica 18.X:dopo Le pseudo-classi :before e :after sono molto interessanti. Sembra che ogni giorno esistano nuovi modi per utilizzarli in modo efficace. Generano semplicemente contenuto attorno all'elemento selezionato. Molte persone si sono imbattute in queste pseudo-classi mentre lavoravano con l'hack clear-fix. Clearfix:after ( contenuto: ""; display: blocco; cancella: entrambi; visibilità: nascosto; dimensione carattere: 0; altezza: 0; ) .clearfix ( *display: blocco in linea; _altezza: 1%; ) Questo hackerare usa :after per aggiungere uno spazio dopo un elemento e impedire che si riavvolga. Secondo la specifica CSS3, è necessario utilizzare due due punti (::). Tuttavia, per la compatibilità è possibile utilizzare anche i due punti singoli. Compatibilità IE8+ Firefox safari musica lirica 19.X: passa il mouse div:hover ( sfondo: #e3e3e3; ) Vuoi applicare uno stile a un elemento quando ci passi sopra con il mouse? Poi questo css- selezionatore per te. Tieni presente che le versioni precedenti di Internet Explorer utilizzano: passa il mouse solo per i collegamenti. Questo css-selector è spesso usato per mettere bordo-fondo collegamenti quando si passa il mouse sopra. A:al passaggio del mouse (bordo inferiore: 1px nero pieno;) bordo inferiore: 1px nero pieno; sembra migliore di decorazione del testo: sottolineatura; Compatibilità IE6+ (In IE6: il passaggio del mouse deve essere applicato al collegamento) Firefox safari musica lirica 20.X:non(selettore) div:not(#contenitore) ( colore: blu; ) La pseudoclasse di negazione può essere molto utile. Diciamo che vogliamo selezionare tutti i div tranne quello con id = contenitore. Il codice sopra lo gestisce! Oppure, se vuoi selezionare tutti gli elementi tranne p. *:not(p) ( colore: verde; ) Compatibilità IE9+ Firefox safari musica lirica 21. X::pseudo elemento Possiamo usare pseudo elementi per dare stile a frammenti di elementi come la prima riga o la prima lettera. Tieni presente che devono essere applicati agli elementi a livello di blocco affinché abbiano effetto. Lo pseudo-elemento è specificato da due due punti: :: Selezione della prima lettera di un paragrafo P::prima lettera ( float: sinistra; dimensione carattere: 2em; peso carattere: grassetto; famiglia caratteri: corsivo; imbottitura destra: 2px; ) Questo codice selezionerà tutti i paragrafi e, a sua volta, selezionerà le prime lettere in essi contenuti e applicherà loro questo stile. Seleziona la prima riga di un paragrafo P::prima riga ( peso carattere: grassetto; dimensione carattere: 1,2 em; ) Allo stesso modo, grazie a::first-line impostiamo lo stile della prima riga di un paragrafo. “Per essere compatibile con i fogli di stile esistenti, il browser deve comprendere la precedente notazione di pseudo-elemento a due punti introdotta nei CSS 1, 2 ( :prima riga, :prima lettera, :prima e:dopo). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica." Compatibilità IE6+ Firefox safari musica lirica 22.X:n-esimo figlio(n) li:nth-child(3) ( colore: rosso; ) In precedenza non potevamo selezionare, ad esempio, il terzo elemento figlio? l'ennesimo bambino lo risolve! notare che ennesimo figlio accetta un numero intero come parametro, ma non conta da 0. Se vuoi selezionare il secondo elemento nell'elenco, usa li:ennesimo-bambino(2) . Possiamo anche selezionare ogni quarto elemento dell'elenco semplicemente scrivendo (0)li:n-esimo-bambino(4n)(/0). Compatibilità IE9+ Firefox 3.5+ safari 23.X:n-ultimo-figlio(n) li:nth-last-child(2) ( colore: rosso; ) Cosa succede se hai un enorme elenco di articoli in? ul, e deve selezionare il terzo elemento dalla fine? Invece di scrivere li:nth-child(397), puoi usare ennesimo-ultimo-figlio. Questo metodo è quasi identico a quello sopra, ma conta dalla fine. Compatibilità IE9+ Firefox 3.5+ safari musica lirica 24.X:n-esimo tipo(n) ul:nth-of-type(3) ( bordo: 1px nero pieno; ) Succede che devi selezionare non un elemento figlio, ma un elemento di un certo tipo. Immagina che ci siano cinque elenchi non ordinati su una pagina. . Se vuoi applicare lo stile solo al terzo ul, che non ha un unico id, devi usare ennesimo tipo. Compatibilità IE9+ Firefox 3.5+ safari 25.X:n-ultimo-del-tipo(n) ul:nth-last-of-type(3) ( bordo: 1px nero pieno; ) Possiamo anche usare n-esimo-ultimo del tipo, contando gli elementi dalla fine. Compatibilità IE9+ Firefox 3.5+ safari musica lirica 26.X:primo figlio ul li:primo-figlio ( border-top: nessuno; ) Questa pseudo-classe seleziona il primo elemento figlio. Spesso utilizzato per rimuovere il bordo sul primo e sull'ultimo elemento di un elenco. Compatibilità IE7+ Firefox safari musica lirica 27.X:ultimo figlio ul > li:last-child ( colore: verde; ) In contrasto :primo-figlio:ultimo-figlio seleziona l'ultimo elemento figlio. Compatibilità IE9 + (Sì, sì, IE8 supporta :first-child , ma non supporta :last-child. Ciao Microsoft!) Firefox safari musica lirica 28.X:figlio unico div p:figlio unico ( colore: rosso; ) Non vedrai questa pseudo-classe molto spesso, ma esiste. Ti consente di selezionare gli elementi che sono gli unici figli. Ad esempio, applica lo stile sopra a questo codice html: Un paragrafo. Due paragrafi Due paragrafi Verrà selezionato solo il primo div perché è l'unico figlio. Compatibilità IE9+ Firefox safari musica lirica 29.X:solo-tipo Pseudoclasse molto interessante. Colpisce gli elementi che non hanno vicini all'interno dell'elemento genitore. Ad esempio, scegliamo un ul con un solo elemento nell'elenco. L'unica soluzione è usare solo di tipo . Ul > li:only-of-type ( peso-carattere: grassetto; ) Compatibilità IE9+ Firefox 3.5+ safari musica lirica 30.X: primo del tipo first-of-type seleziona il primo elemento del tipo specificato. Per capire meglio, prendiamo Paragrafo Paragrafo 1 Punto 2 Punto 3 Articolo 4 Ora prova a capire come evidenziare il punto 2. Soluzione 1 Ul:first-of-type > li:nth-child(2) ( peso-carattere: grassetto; ) Soluzione 2 P + ul li:last-child ( peso-carattere: grassetto; ) Soluzione 3 Ul:first-of-type li:nth-last-child(1) ( peso-carattere: grassetto; ) Compatibilità IE9+ Firefox 3.5+ safari musica lirica Materiali tematici: Samsung Galaxy J7 (2017) - Specifiche Cos'è l'iPhone pct. Qual è il primo nell'iphone. Ristrutturato da Apple I migliori smartphone compatti secondo le recensioni dei clienti Come impostare data e ora su Nokia I migliori smartphone con batteria rimovibile Concorrenti Samsung Galaxy A5 (2017) Manuale utente microsoft lumia 550 Recensione del sistema di altoparlanti Samsung Level Box Slim! Aggiornato: 04.08.2023 103583 Se noti un errore, seleziona una porzione di testo e premi Ctrl + Invio CONDIVIDERE: Categorie del sito Windows 10 Internet, Wi-Fi Utile Windows 7 Errori Ferro Windows XP Stampanti Windows 8 Programmi Trattamento dei virus casa A proposito del diario Contatti Pubblicità Copyright © 2023 3dgosha.ru - Computer e gadget moderni