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 creando un nuovo Caso di Test.
  • Componente Area della Pagina (Nuovo Caso di Test > Aggiungi Pagina > Ambito Area della Pagina): Quando si definisce un'Area della Pagina nel pannello Aggiungi Pagine creando un nuovo Caso di Test.
  • Componente Area della Pagina (Prepara la Pagina per il Test Automatizzato e Manuale > Ambito Area della Pagina): Quando si definisce un'Area della Pagina della "pagina sotto test" nella schermata Prepara la Pagina per il Test Automatizzato e Manuale accessibile da Riepilogo del Test.

Primi Passi

Localizzare e copiare un selettore tipicamente implica l'uso degli "strumenti per sviluppatori" forniti dal tuo browser web. Questi hanno nomi diversi a seconda del tipo di browser, e ognuno offre scorciatoie da tastiera per accedere agli strumenti e navigare al loro interno.

Riferimenti alle Scorciatoie da Tastiera per Tipo di Browser

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

Apertura degli Strumenti per Sviluppatori (Esempio Firefox)

L'esempio che segue illustra l'utilizzo degli Strumenti per Sviluppatori di Mozilla Firefox. Per ulteriori informazioni sull'uso delle scorciatoie da tastiera con gli Strumenti per Sviluppatori di Firefox, consulta Scorciatoie da Tastiera degli Sviluppatori Mozilla.

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

  • Senza un elemento selezionato: Scegli il **Inspector** opzione dal **Sviluppatore** menu **(Ctrl+Shift+I)**, oppure dalla barra dei menu di Firefox, selezionare **Strumenti > Sviluppatore Web > Inspector (Ctrl+Shift+C)**.
  • Con un elemento selezionato*: **Fare clic con il tasto destro** su un elemento di una pagina web e selezionare **Ispeziona Elemento [(Q)]{.kbd}**.

Copiare un Selettore da una pagina

  1. Right-click sulla regione desiderata della pagina di test, quindi selezionare Inspect Element dal menu per avviare l'Inspector in modo da poter 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 usi gli Strumenti per sviluppatori di Firefox, puoi right-click > Copy Unique Selector per l'elemento attualmente selezionato nello strumento Inspector. Assicurati di incollare il riferimento completo dell'elemento formattato correttamente (ad esempio, per testare l' id elemento attributo per il valore 'main', specificheresti #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 riferimenti completi agli elementi, vedere la documentazione sui Selettori CSS del sito Mozilla Developer o la Raccomandazione W3C del Livello 3 dei Selettori.

    • Selector: #id → Il #id selettore 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 dalla clipboard virtuale 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. Problema noto: Usando il Selettore CSS nel Browser Chrome. Clicca su Ispeziona a destra, Apri Strumenti per sviluppatori, nella scheda degli elementi, trova il selettore CSS da mirare, clicca su elemento>copia>xpath o elemento>copia>Xpath completo ed appare sempre questo errore,\ 'Si è verificato un errore sconosciuto. Se questo caso di test contiene componenti o aree di 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 utilizzate per identificare un elemento o un gruppo di elementi su una pagina web.

**Risposta leggermente più lunga e tecnica**: I selettori sono schemi che corrispondono agli elementi in una struttura ad albero e possono essere utilizzati per testare frammenti specifici o selezionare nodi all'interno di documenti HTML o XML. Il linguaggio Cascading Style Sheet (CSS3) descrive il rendering dei documenti HTML su schermo o in voce, e utilizza i selettori per legare le proprietà di stile agli elementi nei documenti HTML.

**Uso**: Valutando l'espressione su tutti gli elementi in un sottoalbero, i selettori possono essere utilizzati 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 una condizione (come in una regola CSS) che determina quali elementi un selettore corrisponde in un albero del documento, o come una descrizione piatta 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 di lingua inglese nell'albero del documento per qualsiasi spazio dei nomi, inserisci:

    *[hreflang|=en]

  • Tipo: Un prefisso componente opzionale dello spazio dei nomi prefisso a un nome di elemento (|) Ad esempio, per rappresentare un elemento di intestazione 2 nell'albero del documento, inserisci semplicemente:

    h2

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

    h3[title]

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

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

  • ID: Attributi dichiarati di tipo ID identificano in modo univoco un elemento con un simbolo di numero (#) Ad esempio, per rappresentare un selettore ID dove qualsiasi elemento il cui valore di 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 link che portano la classe external e sono già stati visitati, inserisci:

    a.external:visited

  • Pseudo-elementi: Due due punti seguiti dal nome di un pseudo-elemento consentono l'accesso a contenuti oltre l'attuale albero del documento, e ne è concesso solo uno per selettore (::)

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

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

  • Combinatori: Consentono la specificazione di 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 frammento seguente:

    <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 a World Wide Web Consortium (W3C) - Selettori Livello 3: https://drafts.csswg.org/selectors-3/

Argomenti Correlati:

Is this page helpful?

Help us improve this page

Still need help?