Come trovare i selettori CSS<\/h2>\n
Hai solo bisogno di uno strumento e ce l’hai gi\u00e0: un browser!<\/p>\n
Ogni browser ha una serie di strumenti<\/a> di sviluppo<\/a> che possono essere utilizzati per esaminare un sito web. User\u00f2 Chrome<\/a>, ma puoi utilizzare qualsiasi browser moderno che desideri. Hanno tutti un set di strumenti estremamente simile.<\/p>\n Innanzitutto, apri la tua home page in una nuova scheda.<\/p>\n Fare clic con il pulsante destro del mouse in qualsiasi punto della pagina e selezionare l’opzione "Visualizza sorgente". Si aprir\u00e0 una pagina simile a questa in una nuova scheda:<\/p>\n Il codice sorgente di www.competethemes.com<\/p>\n Questo \u00e8 l’HTML grezzo della pagina web. Questo \u00e8 ci\u00f2 che Google, il tuo browser e qualsiasi altro software vedranno quando visiteranno il tuo sito. \u00c8 il codice che il tuo browser visualizza in un sito web con cui puoi interagire.<\/p>\n \u00c8 importante capire che ogni pagina del tuo sito \u00e8 composta da HTML come questo.<\/p>\n Anche se \u00e8 bello vedere il codice dietro il sito web, c’\u00e8 un modo migliore e pi\u00f9 utile per vederlo.<\/p>\n Torna alla tua home page, fai clic con il pulsante destro del mouse su qualsiasi parte della pagina e questa volta seleziona l’opzione "Ispeziona" (potrebbe dire "Ispeziona elemento"). Questo aprir\u00e0 gli strumenti di sviluppo del tuo browser presentando una finestra come questa:<\/p>\n Questo \u00e8 un altro modo per visualizzare lo stesso HTML che hai appena visto durante la visualizzazione del codice sorgente. La differenza \u00e8 che ora abbiamo una gerarchia con cui possiamo navigare e interagire.<\/p>\n Se tutto questo sembra strano e opprimente, va bene. L’obiettivo qui non \u00e8 padroneggiare gli strumenti di sviluppo del tuo browser, \u00e8 trovare un selettore CSS sul sito.<\/p>\n Nei tuoi strumenti di sviluppo, c’\u00e8 un lato sinistro e un lato destro. Il lato sinistro ha una gerarchia dell’HTML che possiamo navigare. Puoi ignorare completamente il lato destro.<\/p>\n Ora, se passi il mouse sugli elementi HTML negli strumenti di sviluppo, noterai qualcosa di veramente interessante. Ogni elemento viene evidenziato sulla pagina mentre ci passi sopra.<\/p>\n In questo modo \u00e8 facile raggiungere l’elemento desiderato. In effetti, non hai davvero bisogno di capire l’HTML per trovare l’elemento che stai cercando.<\/p>\n Ci sono due modi per arrivare rapidamente all’elemento che devi scegliere come target.<\/p>\n Diciamo che ho bisogno di accedere a un collegamento nella mia paginazione. Posso fare clic con il pulsante destro del mouse in un punto qualsiasi della pagina, quindi utilizzare le frecce del menu a discesa per raggiungere il collegamento.<\/p>\n Ogni volta che clicco su una freccia, rivela gli elementi contenuti all’interno di quell’elemento. Questo \u00e8 spesso necessario, ma il metodo successivo pu\u00f2 essere ancora pi\u00f9 semplice e veloce.<\/p>\n A volte puoi selezionare l’elemento esatto che desideri. Per fare ci\u00f2, fai clic con il pulsante destro del mouse sull’elemento e gli strumenti di sviluppo si apriranno gi\u00e0 evidenziando quell’elemento.<\/p>\n Ecco come accedere allo stesso collegamento di impaginazione con questo metodo pi\u00f9 veloce.<\/p>\n Una volta individuato l’elemento HTML che stai cercando, l’ultimo passaggio consiste nel copiare il selettore CSS<\/a>.<\/p>\n Nello screenshot qui sotto, puoi vedere che sto passando con il mouse sopra il link della pagina due.<\/p>\nVisualizza l’HTML del tuo sito<\/h3>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nOttieni una visione migliore dell’HTML<\/h3>\n
Naviga nell’HTML<\/h3>\n
Metodo 1: Naviga usando le frecce<\/h4>\n
Metodo 2: fare clic con il pulsante destro del mouse sull’elemento<\/h4>\n
Ottieni il selettore CSS<\/h3>\n
![\"Come](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n