Selettore CSS

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

In questa pagina:

Ci sono diverse aree dell'applicazione axe Auditor che forniscono un campo Selettore. Segui questo processo quando vuoi specificare un particolare selettore CSS da testare come parte dei seguenti elementi:

  • Componente Comuni (Nuovo Caso di Test > Aggiungi Componente): Quando si definisce un componente comune nel pannello Componente Comuni durante la creazione di un nuovo Caso di Test.
  • Componente Area di Pagina (Nuovo Caso di Test > Aggiungi Pagina > Ambito Area di Pagina): Quando si definisce un'Area di Pagina nel pannello Aggiungi Pagina durante la creazione di un nuovo Caso di Test.
  • Componente Area di Pagina (Prepara Pagina per Test Automatizzati e Manuali > Ambito Area di Pagina): Quando si definisce un'Area di Pagina della "pagina in esame" nella schermata Prepara Pagina per Test Automatizzati e Manuali accessibile da Panoramica Test.

Iniziare

Individuare e copiare un selettore in genere comporta l'uso degli "strumenti per sviluppatori" forniti dal tuo browser web. Questi hanno nomi diversi a seconda del tipo di browser, e ciascuno offre scorciatoie da tastiera per accedere agli strumenti e navigare all'interno di essi.

Riferimento delle scorciatoie da tastiera per tipo di browser

Su un Mac: In generale, il tasto Cmd (⌘) può essere sostituito con [Ctrl] su un dispositivo OSX o iOS.

Aprire gli Strumenti per sviluppatori (Esempio Firefox)

L'esempio che segue illustra l'uso degli Strumenti per Sviluppatori di Mozilla Firefox. Per maggiori informazioni sull'uso delle scorciatoie da tastiera con gli Strumenti per Sviluppatori di Firefox, vedi Scorciatoie da tastiera per sviluppatori Mozilla.

È possibile aprire l'Ispettore (uno degli Strumenti per Sviluppatori che li avvia tutti) in uno dei seguenti modi:

  • Senza un elemento selezionato: Scegli l'opzione Ispettore dal menu Sviluppatore (Ctrl+Shift+I), oppure dalla Barra dei Menu di Firefox, seleziona Strumenti > Web Developer > Ispettore (Ctrl+Shift+C).
  • Con un elemento selezionato*: Clic destro un elemento su una pagina web e seleziona Ispeziona Elemento [(Q)]{.kbd}.

Copiare un selettore da una pagina

  1. Right-click sulla regione desiderata della pagina di test, quindi seleziona Inspect Element dal menu per avviare l'Ispettore, in modo da poter poi selezionare un elemento sulla pagina (o utilizzare la scorciatoia da tastiera Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Copia il selettore CSS che desideri mirare. Ad esempio, quando utilizzi gli strumenti per sviluppatori di Firefox, puoi right-click > Copy Unique Selector per l'elemento attualmente selezionato nello strumento Ispettore. Assicurati di incollare il riferimento dell'elemento completo e formattato correttamente (ad esempio, per testare l' id elemento attributo per il valore 'main', dovresti specificare #main come selettore).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Per informazioni complete sui selettori CSS formattati correttamente e sui riferimenti completi agli elementi, consulta la documentazione sui selettori CSS del Web Developer di Mozilla o la Raccomandazione W3C sui Selectors Level 3.

    • Selector: #id → Il selettore #id stile l'elemento con l'id specificato.
    • Example: #main → L'id specificato è main.
    • Example Reference: Seleziona l'elemento con id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Incolla il selettore che hai copiato dagli appunti virtuali nel campo Selector .
    Quando accedi ai problemi risultanti trovati per il componente o l'area della pagina mirata, vedrai inclusi quelli relativi al selettore CSS specifico che hai inserito.
  4. Bug noto: Quando si utilizza il selettore CSS nel browser Chrome. Trasferisci l'ispezione a destra, apri gli strumenti di sviluppo, nella scheda degli elementi, trova il selettore CSS su cui fare clic sull'elemento>copia>xpath o elemento>copia>Xpath completo restituirà sempre questo errore,\ 'Si è verificato un errore sconosciuto. Se questo caso di test contiene componenti o aree della pagina, assicurati che tutti i selettori siano validi'
    Workaround: Trova l'ID per il selettore CSS e utilizza Copy > Copy Selector.

Cosa sono i selettori?

Risposta rapida: Sono stringhe di testo che possono essere usate per identificare un elemento o un gruppo di elementi su una pagina web.

Risposta leggermente più lunga e più tecnica: I selettori sono schemi che coincidono con elementi in una struttura ad albero e possono essere usati per testare frammenti specifici o selezionare nodi all'interno di documenti HTML o XML. Il linguaggio Cascading Style Sheet (CSS3) descrive la resa dei documenti HTML su schermo o in forma orale e utilizza i selettori per associare proprietà di stile agli elementi nei documenti HTML.

Uso: Valutando l'espressione su tutti gli elementi in un sottoalbero, i selettori possono essere usati per:

  • Selezionare un set di elementi
  • Selezionare un singolo elemento da un set di elementi

Struttura: Un selettore rappresenta una struttura che può essere usata come condizione (come in una regola CSS) che determina quali elementi un selettore coincide in un albero del documento, o come una descrizione piatta del frammento HTML o XML corrispondente a quella struttura.

Tipi: I tipi di selettori includono:

  • Universale: Il nome qualificato di qualsiasi tipo di elemento (*) Ad esempio, per specificare il nome qualificato di qualsiasi elemento in lingua inglese nell'albero del documento per qualsiasi namespace, inserisci:

    *[hreflang|=en]

  • Tipo: Un eventuale prefisso del componente del namespace aggiunto al nome di un elemento (|) Ad esempio, per rappresentare un elemento di intestazione 2 nell'albero del documento, basta inserire:

    h2

  • Attributo: Rappresenta l'attributo di un elemento ([]) Ad esempio, per rappresentare un elemento h3 che ha l'attributo title, indipendentemente dal suo valore, inserisci:

    h3[title]

  • Classe: Notazione a punto o "punto fermo" per rappresentare l'attributo class per il rispettivo namespace (.) Ad esempio, per assegnare informazioni di stile di colore verde a tutti gli elementi con class="example", inserisci:

    .example { color: green } / tutti gli elementi con class=example */

  • ID: Gli attributi dichiarati di tipo ID identificano unicamente un elemento con un segno di cancelletto (#) Ad esempio, per rappresentare un selettore ID in cui qualsiasi elemento il cui valore dell'attributo di tipo ID è "12345", inserisci:

    #12345

  • Pseudo-classi: Selezione di informazioni al di fuori dell'albero del documento che non possono essere espresse con semplici selettori (:) Ad esempio, per specificare un selettore che rappresenta i link con classe external già visitati, inserisci:

    a.external:visited

  • Pseudo-elementi: Due punti seguiti dal nome di un pseudo-elemento permettono di accedere ai contenuti oltre l'attuale albero del documento, e solo uno per selettore è consentito (::)

    Ad esempio, per cambiare in maiuscolo le lettere della prima riga di ogni elemento p, inserisci:

    p::first-line { text-transform: uppercase }

  • Combinatori: Permettono la specifica di un percorso gerarchico per mostrare l'ascendenza come elementi figli o fratelli ( ) o (+)

    Ad esempio, per prendere di mira gli elementi em che sono discendenti degli elementi h1, inserisci:

    h1 em.

    È una descrizione corretta e valida, ma parziale, del seguente frammento:

    <h1>Questo <span class="myclass"> titolo è <em>molto>/em> importante</span></h1>

Sintassi: La base "grammatica" dei selettori include quanto segue:

  • *: 0 o più (Nota: Poiché questo può essere omesso quando implicito, non viene usato spesso.)
  • +: 1 o più
  • ?: 0 o 1
  • |: separa le alternative
  • [ ]: raggruppamento

Riferimento Completo: Per ulteriori informazioni, fai riferimento al Consorzio World Wide Web (W3C) - Selettori Livello 3: https://drafts.csswg.org/selectors-3/

Argomenti Correlati:

Is this page helpful?

Help us improve this page

Still need help?