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 di quanto segue:

  • Componente comune (Nuovo Caso di Test > Aggiungi Componente): Quando si definisce un componente comune nel pannello Componenti Comuni durante la creazione di un nuovo caso di test.
  • Componente Area della Pagina (Nuovo Caso di Test > Aggiungi Pagina > Ambito Area della Pagina): Quando si definisce un'Ambito Area della Pagina nel pannello Aggiungi Pagine durante la creazione di un nuovo caso di test.
  • Componente Area della Pagina (Preparare la Pagina per Test Automatici e Manuali > Ambito Area della Pagina): Quando si definisce un'Ambito Area della Pagina "sotto test" nella schermata Preparare la Pagina per Test Automatici e Manuali accessibile dalla Panoramica del Test.

Iniziare

Localizzare e copiare un selettore di solito comporta l'uso degli "strumenti per sviluppatori" inclusi nel 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 al loro interno.

Riferimento Scorciatoie da Tastiera per Tipo di Browser

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

Apertura degli Strumenti per sviluppatori (Esempio Firefox)

L'esempio che segue mostra l'uso degli Strumenti per sviluppatori di Mozilla Firefox. Per ulteriori informazioni sull'uso delle scorciatoie da tastiera con gli Strumenti per sviluppatori di Firefox, vedi Scorciatoie da Tastiera Sviluppatore Mozilla.

Puoi aprire l'Ispettore (uno degli Strumenti per sviluppatori che avvia tutti gli altri) in uno dei seguenti modi:

  • Senza un elemento selezionato: Scegli il **Ispettore** opzione dal **Sviluppatore** menù **(Ctrl+Shift+I)**, oppure dalla Barra dei menù di Firefox, seleziona **Strumenti > Sviluppo web > Ispettore (Ctrl+Shift+C)**.
  • Con un *elemento selezionato*: **Clicca con il tasto destro** su un elemento di una pagina web e seleziona **Ispeziona elemento [(Q)]{.kbd}**.

Copiare un selettore da una pagina

  1. Right-click sulla regione desiderata della pagina di prova, quindi seleziona Inspect Element dal menù per avviare l'Ispettore in modo da poter poi selezionare un elemento sulla pagina (oppure usa 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 vuoi mirare. Ad esempio, quando usi 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 completo dell'elemento formattato correttamente (ad esempio, per testare l'elemento dell'attributo id 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 dettagli completi sui selettori CSS formattati correttamente e sul riferimento completo agli elementi, consulta la documentazione Selectors CSS sul sito Mozilla Developer Web o la raccomandazione Selectors Level 3 del W3C.

    • Selector: #id → Il selettore #id stila 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 Selector campo.
    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 un selettore CSS nel browser Chrome. Clicca destro, Apri strumenti per sviluppatori, nella scheda elementi, trova il selettore css su cui fare clic ed elemento>copia>xpath o elemento>copia>Full xpath restituisce sempre questo errore,\ 'Si è verificato un errore sconosciuto. Se questo caso di prova contiene componenti o aree di pagina, assicurati che tutti i selettori siano validi'
    Workaround: Trova l'ID per il selettore CSS e usalo Copy > Copy Selector.

Cosa sono i selettori?

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

**Risposta leggermente più lunga e tecnica**: I selettori sono modelli che si corrispondono agli 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 a voce e utilizza i selettori per collegare le proprietà di stile gli elementi nei documenti HTML.

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

  • Selezionare un insieme di elementi
  • Selezionare un singolo elemento da un insieme 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 corrisponde in un albero di documenti, o come una descrizione semplice del frammento HTML o XML corrispondente a quella struttura.

Tipi: I tipi di selettore 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 dei documenti per qualsiasi spazio dei nomi, inserisci:

    *[hreflang|=en]

  • Tipo: Un prefisso componente dello spazio dei nomi opzionale anteposto al nome di un elemento (|) Ad esempio, per rappresentare un elemento heading 2 nell'albero dei documenti, inserisci semplicemente:

    h2

  • Attributo: Rappresenta un attributo di un elemento ([]) Ad esempio, per rappresentare un elemento h3 che porta l'attributo title, qualunque sia il suo valore, inserisci:

    h3[title]

  • Classe: Notazione a punto o "punto fermo" per rappresentare l'attributo di classe per lo spazio dei nomi rispettivo (.) 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 univocamente un elemento con un segno numerico (#) 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 dei documenti che non possono essere espresse con selettori semplici (:) Ad esempio, per specificare un selettore che rappresenta i link che portano la classe external e sono già stati visitati, inserisci:

    a.external:visited

  • Pseudo-elementi: Due doppi punti seguiti dal nome di un pseudo-elemento permettono di accedere a contenuti oltre l'albero dei documenti corrente, 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 di specificare un percorso gerarchico per mostrare l'ascendenza come elementi figli o fratelli ( ) o (+)

    Ad esempio, per mirare agli 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 "grammatica" di base dei selettori include i seguenti elementi:

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

Riferimento Completo: Per ulteriori informazioni, fare riferimento al World Wide Web Consortium (W3C) - Selectors Level 3: https://drafts.csswg.org/selectors-3/

Argomenti correlati:

Is this page helpful?

Help us improve this page

Still need help?