Share
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
Quindi hai imparato la base id, classe, e discendente selettori - e poi lo ha chiamato un giorno? Se è così, ti stai perdendo un enorme livello di flessibilità. Mentre molti dei selettori menzionati in questo articolo fanno parte delle specifiche CSS3 e, di conseguenza, sono disponibili solo nei browser moderni, devi a te stesso impegnarli in memoria.
A proposito, se hai problemi con il tuo CSS e vuoi che un professionista lo guardi e corregga eventuali errori, puoi trovare alcuni liberi professionisti su Envato Studio.
* margine: 0; padding: 0;
Buttiamo fuori quelli ovvi, per i principianti, prima di passare ai selezionatori più avanzati.
Il simbolo stella mirerà a ogni singolo elemento sulla pagina. Molti sviluppatori useranno questo trucco per azzerare il margines e imbottitura. Mentre questo è sicuramente un bene per i test rapidi, ti consiglierei di non usare mai questo nel codice di produzione. Aggiunge troppo peso sul browser e non è necessario.
Il * può anche essere usato con i selettori figlio.
#container * border: 1px solid black;
Questo riguarderà ogni singolo elemento che è figlio del #contenitore div. Di nuovo, cerca di non usare questa tecnica molto, se mai.
Visualizza la demo
#container width: 960px; margine: auto;
Il prefisso del simbolo di hash su un selettore ci consente di scegliere come target id. Questo è facilmente l'uso più comune, tuttavia sii cauto quando usi id selettori.
Chiediti: ho assolutamente bisogno di applicare un
ida questo elemento per mirarlo?
id i selettori sono rigidi e non consentono il riutilizzo. Se possibile, prova prima ad usare un nome di tag, uno dei nuovi elementi HTML5 o anche una pseudo-classe.
Visualizza la demo
.errore colore: rosso;
Questo è un classe selettore. La differenza tra ids e classeè che, con quest'ultimo, puoi scegliere come target più elementi. Uso classees quando si desidera applicare lo stile a un gruppo di elementi. In alternativa, usa ids per trovare un ago-in-a-haystack, e stile solo quell'elemento specifico.
Visualizza la demo
li a decorazione del testo: nessuno;
Il prossimo selettore di commenti è il discendente selettore. Quando devi essere più specifico con i tuoi selezionatori, li usi. Ad esempio, cosa succede se non il targeting tutti tag di ancoraggio, devi solo indirizzare gli ancoraggi che si trovano in una lista non ordinata? Questo è specificamente quando si utilizza un selettore discendente.
Pro-tip - Se il tuo selezionatore è simile
X Y Z A B.error, lo stai facendo male. Chiediti sempre se è assolutamente necessario applicare tutto questo peso.
Visualizza la demo
a colore: rosso; ul margin-left: 0;
Che cosa succede se si desidera scegliere come target tutti gli elementi di una pagina, in base al loro genere, piuttosto che un id o classenome? Mantieni la semplicità e utilizza un selettore di tipi. Se devi scegliere come target tutti gli elenchi non ordinati, utilizza ul .
Visualizza la demo
a: link color: red; a: visted color: purple;
Noi usiamo il : Link pseudo-classe per indirizzare tutti i tag di ancoraggio che devono ancora essere cliccati.
In alternativa, abbiamo anche il : visited pseudo classe, che, come previsto, ci consente di applicare uno stile specifico solo ai tag di ancoraggio nella pagina avere stato cliccato su, o visitato.
Visualizza la demo
ul + p colore: rosso;
Questo è indicato come un selettore adiacente. Selezionerà solo l'elemento che è immediatamente preceduto dall'elemento precedente. In questo caso, solo il primo paragrafo dopo ciascuno ul avrà il testo rosso.
Visualizza la demo
div # container> ul border: 1px solid black;
La differenza tra lo standard X Y e X> Y è che quest'ultimo selezionerà solo i bambini diretti. Ad esempio, considera il seguente markup.
- Lista Articolo
- Bambino
- Lista Articolo
- Lista Articolo
- Lista Articolo
Un selezionatore di #container> ul bersaglierà solo il uls che sono figli diretti del div con un id di contenitore. Non bersaglia, per esempio, il ul questo è un figlio del primo Li.
Per questo motivo, ci sono vantaggi prestazionali nell'uso del combinatore di bambini. In realtà, è consigliabile in particolare quando si lavora con i motori di selezione CSS basati su JavaScript.
Visualizza la demo
ul ~ p colore: rosso;
Questo combinatore di fratelli è simile a X + Y, tuttavia, è meno severo. Mentre un selettore adiacente (ul + p) selezionerà solo il primo elemento che è subito preceduto dall'ex selezionatore, questo è più generalizzato. Selezionerà, facendo riferimento al nostro esempio sopra, qualsiasi p elementi, purché seguano a ul.
Visualizza la demo
a [titolo] colore: verde;
Indicato come attribuisce il selettore, nel nostro esempio sopra, questo selezionerà solo i tag di ancoraggio che hanno a titolo attributo. Tag di ancoraggio che non riceveranno questo particolare stile. Ma cosa succede se devi essere più specifico? Bene?
Visualizza la demo
a [href = "http://net.tutsplus.com"] color: # 1f6053; / * nettuts green * /
Lo snippet in alto modellerà tutti i tag di ancoraggio a cui si collegano http://net.tutsplus.com; riceveranno il nostro marchio di colore verde. Tutti gli altri tag di ancoraggio rimarranno inalterati.
Tieni presente che stiamo racchiudendo il valore tra virgolette. Ricordati di farlo anche quando usi un motore di selezione CSS JavaScript. Quando possibile, usa sempre i selettori CSS3 su metodi non ufficiali.
Funziona bene, però, è un po 'rigido. Cosa succede se il collegamento è diretto a Nettuts +, ma, forse, il percorso è nettuts.com piuttosto che l'url completo? In questi casi possiamo usare un po 'della sintassi delle espressioni regolari.
Visualizza la demo
a [href * = "tuts"] color: # 1f6053; / * nettuts green * /
Eccoci; questo è ciò di cui abbiamo bisogno. La stella indica che deve apparire il valore procedurale da qualche parte nel valore dell'attributo. In questo modo, questo copre nettuts.com, net.tutsplus.com, e persino tutsplus.com.
Tieni presente che questa è una dichiarazione ampia. Cosa succede se il tag di ancoraggio è collegato a un sito non Envato con la stringa tuts nell'URL? Quando devi essere più specifico, usa ^ e $, per fare riferimento rispettivamente all'inizio e alla fine di una stringa.
Visualizza la demo
a [href ^ = "http"] background: url (path / to / external / icon.png) no-repeat; padding-left: 10px;
Ti sei mai chiesto come alcuni siti web siano in grado di visualizzare una piccola icona accanto ai link esterni? Sono sicuro che li hai già visti prima; sono buoni promemoria che il link ti indirizzerà verso un sito completamente diverso.
Questo è un gioco da ragazzi con il simbolo carato. È più comunemente usato nelle espressioni regolari per designare l'inizio di una stringa. Se vogliamo scegliere come target tutti i tag di ancoraggio che hanno a href che inizia con http, potremmo usare un selettore simile allo snippet mostrato sopra.
Si noti che non stiamo cercando
http: //; questo non è necessario e non tiene conto degli URL che iniziano conhttps: //.
Ora, e se volessimo invece modellare tutte le ancore che collegano, diciamo, a una foto? In questi casi, cerchiamo il fine della stringa.
Visualizza la demo
a [href $ = ". jpg"] color: red;
Ancora una volta, usiamo un simbolo di espressioni regolari, $, per riferirsi alla fine di una stringa. In questo caso, stiamo cercando tutti gli ancoraggi che si collegano a un'immagine, o almeno un URL che termina con .jpg. Tieni presente che questo sicuramente non funzionerà gif e PNG.
Visualizza la demo
a [data-filetype = "image"] color: red;
Fare riferimento al numero otto; come possiamo compensare tutti i vari tipi di immagine: png, jpeg,jpg, gif? Bene, potremmo creare più selettori, come ad esempio:
a [href $ = ". jpg"], a [href $ = ".jpeg"], a [href $ = ". png"], a [href $ = ". gif"] colore: rosso;
Ma questo è un dolore nel sedere ed è inefficiente. Un'altra possibile soluzione è utilizzare attributi personalizzati. Cosa succede se abbiamo aggiunto il nostro Dati-filetype attributo a ogni ancora che si collega a un'immagine?
Link immagine
Quindi, con quello gancio al posto, possiamo utilizzare un selettore di attributi standard per scegliere come target solo le ancore.
a [data-filetype = "image"] color: red;
Visualizza la demo
a [data-info ~ = "external"] color: red; a [data-info ~ = "image"] border: 1px solid black;
Ecco uno speciale che impressionerà i tuoi amici. Non molte persone sanno di questo trucco. La tilda (~) il simbolo ci consente di indirizzare un attributo che ha un elenco di valori separati da spazi.
Andando insieme al nostro attributo personalizzato dal numero quindici, sopra, potremmo creare un dati-informazioni attributo, che può ricevere un elenco separato dallo spazio di tutto ciò di cui abbiamo bisogno di prendere nota. In questo caso, prenderemo nota dei link esterni e dei link alle immagini - solo per l'esempio.
"Fai clic su Me, Fool
Con quel markup in atto, ora possiamo indirizzare qualsiasi tag che abbia uno di questi valori, usando il trucco del selettore ~ attributes.
/ * Target-info-attr che contiene il valore "external" * / a [data-info ~ = "external"] color: red; / * E che contengono il valore "image" * / a [data-info ~ = "image"] border: 1px solid black;
Abbastanza elegante, ay?
Visualizza la demo
input [type = radio]: checked border: 1px solid black;
Questa pseudo classe avrà come target solo un elemento dell'interfaccia utente che è stato verificato - come un pulsante di opzione o casella di controllo. E 'così semplice.
Visualizza la demo
Il prima e dopo pseudo classi kick culo. Sembra che ogni giorno le persone trovino modi nuovi e creativi per utilizzarli in modo efficace. Semplicemente generano contenuti attorno all'elemento selezionato.
Molti sono stati introdotti per la prima volta in queste classi quando hanno incontrato l'hack di correzione chiara.
.clearfix: after content: ""; blocco di visualizzazione; chiaro: entrambi; visibilità: nascosta; dimensione carattere: 0; altezza: 0; .clearfix * display: inline-block; altezza: 1%;
Questo mod usa il :dopo pseudo classe per aggiungere uno spazio dopo l'elemento e quindi cancellarlo. È un trucco eccellente da avere nella borsa degli attrezzi, in particolare nei casi in cui il overflow: nascosto; metodo non è possibile.
Per un altro uso creativo di questo, fare riferimento al mio suggerimento rapido sulla creazione di ombre.
Secondo la specifica dei selettori CSS3, dovresti tecnicamente utilizzare la sintassi degli pseudo elementi di due punti
::. Tuttavia, per rimanere compatibile, l'user-agent accetta anche un singolo uso del colon. In effetti, a questo punto, è più intelligente usare la versione a due punti nei tuoi progetti.
div: hover background: # e3e3e3;
Oh andiamo. Sai questo. Il termine ufficiale per questo è pseudo classe d'azione dell'utente. Sembra confusionario, ma in realtà non lo è. Vuoi applicare uno stile specifico quando un utente passa sopra un elemento? Questo porterà a termine il lavoro!
Tieni presente che la versione precedente di Internet Explorer non risponde quando
: hoverla pseudo classe è applicata a qualcosa di diverso da un tag di ancoraggio.
Utilizzerai più spesso questo selettore quando applichi, ad esempio, a border-bottom per ancorare i tag, quando si è librato sopra.
a: hover border-bottom: 1px solido nero;
Pro-tip -
border-bottom: 1px solido nero;sembra meglio didecorazione del testo: sottolineatura;.
div: not (#container) color: blue;
Il negazione la pseudo classe è particolarmente utile. Diciamo che voglio selezionare tutte le div, tranne quella che ha un id di contenitore. Il frammento sopra gestirà perfettamente questo compito.
Oppure, se volessi selezionare ogni singolo elemento (non consigliato) ad eccezione dei tag di paragrafo, potremmo fare:
*: not (p) color: green;
Visualizza la demo
p :: first-line font-weight: bold; font-size: 1.2em;
Possiamo usare pseudo elementi (designati da ::) per modellare i frammenti di un elemento, come la prima riga o la prima lettera. Tieni presente che questi devono essere applicati agli elementi a livello di blocco per avere effetto.
Uno pseudo-elemento è composto da due punti:
::
p :: first-letter float: left; font-size: 2em; font-weight: bold; font-family: corsivo; padding-right: 2px;
Questo snippet è un'astrazione che troverà tutti i paragrafi sulla pagina e quindi sub-target solo la prima lettera di quell'elemento.
Questo è più spesso usato per creare uno stile simile a quello di un giornale per la prima lettera di un articolo.
p :: first-line font-weight: bold; font-size: 1.2em;
Allo stesso modo, il ::prima linea lo pseudo elemento, come previsto, definisce solo la prima riga dell'elemento.
"Per compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione a due punti per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire: prima riga,: prima lettera,: prima e: dopo). Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica. " - Fonte
Visualizza la demo
li: nth-child (3) color: red;
Ricorda i giorni in cui non avevamo modo di scegliere come target elementi specifici in una pila? Il nth-child la pseudo classe risolve questo!
Si prega di notare che nth-child accetta un numero intero come parametro, tuttavia, questo non è basato su zero. Se desideri scegliere come target il secondo elemento della lista, usa li: nth-child (2).
Possiamo persino usarlo per selezionare una serie variabile di bambini. Ad esempio, potremmo fare li: nth-child (4N) per selezionare ogni quarto elemento della lista.
Visualizza la demo
li: nth-last-child (2) color: red;
Che cosa succede se hai un enorme elenco di elementi in a ul, e solo bisogno di accedere, per esempio, il terzo all'ultimo elemento? Piuttosto che farlo li: nth-child (397), potresti invece usare il nth-last-child pseudo classe.
Questa tecnica funziona quasi identicamente dal numero sedici sopra, tuttavia, la differenza è che inizia alla fine della raccolta e torna indietro.
Visualizza la demo
ul: nth-of-type (3) border: 1px solid black;
Ci saranno momenti in cui, piuttosto che selezionare a bambino, devi invece selezionare in base al genere di elemento.
Immagina mark-up che contiene cinque elenchi non ordinati. Se volevi stile solo il terzo ul, e non ha avuto un unico id per agganciarti, potresti usare il nth-of-type (n) pseudo classe. Nel frammento sopra, solo il terzo ul avrà un bordo attorno ad esso.
Visualizza la demo
ul: nth-last-of-type (3) border: 1px solid black;
E sì, per rimanere coerenti, possiamo anche usare nth-last-of-type per iniziare alla fine dell'elenco dei selettori e tornare indietro per individuare l'elemento desiderato.
ul li: first-child border-top: none;
Questa pseudo classe strutturale ci consente di scegliere come target solo il primo figlio del genitore dell'elemento. Lo userai spesso per rimuovere i bordi dal primo e dall'ultimo elenco.
Ad esempio, supponiamo di avere un elenco di righe e ognuna di esse ha un border-top e a border-bottom. Bene, con questo accordo, il primo e l'ultimo elemento di quel set appariranno un po 'strani.
Molti designer applicano classi di primo e scorso per compensare questo. Invece, puoi usare queste pseudo classi.
Visualizza la demo
ul> li: last-child color: green;
Il contrario di Primogenito, ultimo bambino sceglierà l'ultimo elemento del genitore dell'elemento.
Costruiamo un semplice esempio per dimostrare un possibile uso di queste classi. Creeremo un elemento della lista in stile.
Niente di speciale qui; solo una semplice lista.
ul larghezza: 200px; sfondo: # 292929; colore bianco; stile elenco: nessuno; padding-left: 0; li padding: 10px; border-bottom: 1px solido nero; border-top: 1px solid # 3c3c3c;
Questo stile imposterà uno sfondo, rimuovere il riempimento predefinito del browser sul ul, e applicare i bordi a ciascuno Li per fornire un po 'di profondità.
Per aggiungere profondità ai tuoi elenchi, applica a
border-bottoma ogniLiquesta è una tonalità o due più scura dellaLiIl colore di sfondo. Quindi, applicare aborder-topche è un paio di sfumature accendino.
L'unico problema, come mostrato nell'immagine sopra, è che verrà applicato un bordo alla parte superiore e inferiore della lista non ordinata, che sembra strano. Usiamo il :Primogenito e :ultimo bambino pseudo classi per risolvere questo problema.
li: first-child border-top: none; li: last-child border-bottom: none;
Eccoci; questo lo risolve!
Visualizza la demo
Sì, supportato IE8 :Primogenito, ma no :ultimo bambino. Vai a capire.
div p: only-child color: red;
Sinceramente, probabilmente non ti troverai con il figlio unico pseudo-classe troppo spesso. Tuttavia, è disponibile, nel caso in cui ne avessi bisogno.
Ti permette di indirizzare gli elementi che sono il solo figlio del suo genitore. Ad esempio, facendo riferimento allo snippet precedente, solo il paragrafo che è l'unico figlio del file div sarà colorato, rosso.
Assumiamo il seguente markup.
Il mio paragrafo qui.
Due paragrafi in totale.
Due paragrafi in totale.
In questo caso, il secondo divi paragrafi di 's non saranno presi di mira; solo il primo div. Non appena applichi più di un figlio a un elemento, il figlio unico la pseudo classe cessa di avere effetto.
Visualizza la demo
li: only-of-type font-weight: bold;
Questa pseudo classe strutturale può essere utilizzata in modi intelligenti. Destinerà gli elementi che non hanno fratelli all'interno del contenitore principale. Ad esempio, miriamo a tutti uls, che hanno solo una singola voce di elenco.
In primo luogo, chiediti come realizzeresti questo compito? Potresti farlo ul li, ma questo sarebbe un obiettivo tutti Elementi della lista. L'unica soluzione è usare only-of-type.
ul> li: only-of-type font-weight: bold;
Visualizza la demo
Il prima-di-tipo pseudo classe ti permette di selezionare i primi fratelli del suo tipo.
Per capire meglio, facciamo un test. Copia il seguente mark-up nel tuo editor di codice:
Il mio paragrafo qui.
- Voce di elenco 1
- Voce di elenco 2
- Elenco elemento 3
- Voce di elenco 4
Ora, senza leggere oltre, prova a capire come fare solo il targeting "Elenco elemento 2". Quando lo hai capito (o rinunciato), continua a leggere.
Ci sono molti modi per risolvere questo test. Ne esamineremo una manciata. Iniziamo usando prima-di-tipo.
ul: first-of-type> li: nth-child (2) font-weight: bold;
Questo snippet dice essenzialmente: "trova il primo elenco non ordinato nella pagina, quindi trova solo i bambini immediati, che sono elementi di elenco. Successivamente, filtra solo il secondo elemento dell'elenco in quel set.
Un'altra opzione è usare il selettore adiacente.
p + ul li: last-child font-weight: bold;
In questo scenario, troviamo il ul che procede immediatamente il p tag, quindi trova l'ultimo figlio dell'elemento.
Possiamo essere odiosi o giocosi come vogliamo con questi selettori.
ul: first-of-type li: nth-last-child (1) font-weight: bold;
Questa volta, prendiamo il primo ul sulla pagina, quindi trova il primo elemento della lista, ma partendo dal basso! :)
Visualizza la demo
Se stai compensando i browser più vecchi, come Internet Explorer 6, devi comunque stare attento quando usi questi nuovi selettori. Ma, per favore, non lasciarti scoraggiare dall'apprenderli. Faresti un enorme disservizio a te stesso. Assicurati di fare riferimento qui per un elenco di compatibilità del browser. In alternativa, puoi usare l'eccellente script IE9.js di Dean Edward per portare il supporto per questi selettori ai browser più vecchi.
In secondo luogo, quando si lavora con le librerie JavaScript, come il popolare jQuery, si cerca sempre di utilizzare questi selettori CSS3 nativi sui metodi / selettori personalizzati della libreria, quando possibile. Renderà il tuo codice più veloce, poiché il motore di selezione può utilizzare l'analisi nativa del browser, piuttosto che il suo.
È bello che tu stia spendendo tempo a imparare i fondamenti del web design, ma se hai bisogno di una soluzione rapida, uno dei nostri modelli CSS pronti per l'uso potrebbe essere una buona opzione. Abbiamo anche alcuni elementi CSS premium da tenere in considerazione:
Qui ci sono una manciata di elementi di codice pronti all'uso che possono essere utili su Envato Market.
Questo menu a discesa Mega è una soluzione flessibile e facile da integrare per creare menu personalizzati. Il menu a tendina si basa solo su CSS / XHTML e viene fornito con un modulo di contatto pienamente funzionante.
Menu a discesa Mega CSS3Tabelle dei prezzi Web reattivi CSS3 Le griglie sono un pacchetto di tabelle di prezzi CSS3, reattive e retina pronte. Il modello viene fornito con 2 stili di tabella, 20 skin di colore predefiniti, stati di hover animati, possibilità di impostare una o più colonne come attive (spuntate) di default, nastri CSS3, tooltip CSS3, 20 icone sì / no basate su font.
Questa versione è dedicata a qualsiasi sito CMS personalizzato così come a siti non CMS e funzionerà con siti Web HTML o basati su PHP.
Griglie di tabelle di prezzi Web reattivi CSS3Il Tooltip è un gentiluomo bello e moderno che appare quando è in programma. Le sue caratteristiche includono:
Il suggerimentoMegaNavbar è un puro componente di navigazione HTML5 / CSS3 che utilizza il markup standard della barra di navigazione e le classi del sistema di griglia fluida di Bootstrap 3. Funziona con layout fissi e reattivi e ha la possibilità di includere altri componenti Bootstrap. MegaNavbar è compatibile con dispositivi mobili e browser Web moderni.
MegaNavbar (v 2.2.0). Menu avanzato per Bootstrap 3.0+Questo pacchetto di tabelle dei prezzi CSS3 è una soluzione completa per la creazione di fantastici tavoli in pochi minuti. Viene fornito con 6 varianti di colore e 2 varianti di tavolo (chiaro o scuro).
Tabelle dei prezzi CSS3 reattivi
Accentsconagua