Selettore CSS

In questa pagina:

• Introduzione e scorciatoie da tastiera
• Apertura degli Strumenti per sviluppatori
• Copiare un selettore da una pagina
• Cosa sono i selettori?

Ci sono diverse aree dell'applicazione axe Auditor che forniscono un campo Selettore . Segui questa procedura quando si desidera 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 pagina (Nuovo caso di test > Aggiungi pagina > Ambito area pagina): quando si definisce un'area pagina nel pannello Aggiungi pagine durante la creazione di un nuovo caso di test.
• Componente Area Pagina (Prepara Pagina per Test Automatizzati e Manuali Test > Ambito dell'Area Pagina): Quando si definisce un'area pagina del "pagina in fase di test" nella pagina di preparazione per test automatici e manuali Schermata di test accessibile dalla Panoramica esecuzione test.

Iniziare da qui

Per individuare e copiare un selettore, in genere è necessario utilizzare gli "strumenti per sviluppatori" forniti con il browser web. Hanno nomi diversi a seconda del tipo di browser e ognuno propone scorciatoie da tastiera per accedere agli strumenti e navigare al loro interno.

Riferimento alle scorciatoie da tastiera per tipo di browser

• Google Chrome - DevTools: Scorciatoie da tastiera - Google Chrome
• Apple Safari - Web Inspector: Scorciatoie da tastiera
• Microsoft Edge - Strumenti per sviluppatori: Scorciatoie da tastiera degli Strumenti per sviluppatori
• Microsoft Internet Explorer - Strumenti per sviluppatori F12: Developer Tools Keyboard Shortcuts Reference

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

Apertura degli Strumenti per sviluppatori (esempio Firefox)

L'esempio seguente illustra l'utilizzo degli strumenti per sviluppatori di Mozilla Firefox. Per ulteriori informazioni sull'utilizzo delle scorciatoie da tastiera con Firefox Developer Tools, vedere Scorciatoie da tastiera degli sviluppatori Mozilla .

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

• Senza un elemento selezionato: seleziona l'opzione Ispettore dal menu Sviluppo (Ctrl+Maiusc+I) , oppure selezionaStrumenti > Sviluppo Web > Ispettore (Ctrl+Maiusc+C) ** dalla barra dei menu di Firefox.**
• Con un elemento selezionato: Fai clic con il pulsante destro del mouse su un elemento in una pagina Web e seleziona Ispeziona elemento [(Q)]{.kbd}.

Copiare un selettore da una pagina

1. Fare clic con il pulsante destro del mouse sulla regione desiderata della pagina di test, quindi selezionare

Ispeziona elemento dal menu per avviare l'Ispettore e selezionare un elemento sulla pagina (oppure utilizzare la scorciatoia da tastiera Ctrl+Shift+I).

![Fare clic con il tasto destro del mouse sulla pagina in fase di test, quindi selezionare Ispeziona elemento dal menu](../../../images/right-click-inspect-element.png)

2. Copia il selettore CSS che desideri utilizzare come target. Ad esempio, quando si utilizzano gli Strumenti per sviluppatori di Firefox, è possibile > Copia selettore univoco ** fare clic con il pulsante destro del mouse su 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 [inserire esempio] #main come selettore).

   

Informazioni - Riferimento alla formattazione del selettore con esempio: Per informazioni complete sui selettori CSS formattati correttamente e un riferimento completo agli elementi, vedere la documentazione del selettore CSS Web di Mozilla Developer{.external} o la raccomandazione W3C sui selettori di livello 3{.external}.

• Selettore: #id - Il selettore #id assegna lo stile all'elemento con l'id specificato.

• Esempio: #main - L'ID specificato è main.

• Esempio di riferimento: seleziona l'elemento con id="main".

  

3. Incolla il selettore copiato dagli appunti virtuali nel campo Selettore .

   Quando accedi ai problemi riscontrati per il componente o l'area della pagina mirata, vedrai inclusi quelli relativi allo specifico selettore CSS immesso.

4. Bug noto: Quando si utilizza il selettore CSS nel browser Chrome. Ispeziona elemento, apri gli strumenti per sviluppatori, nella scheda Elementi, trova il selettore CSS per indirizzare il clic e l'elemento>copia>xpath o l'elemento>copia>Full xpath restituiscono 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. Soluzione alternativa: trova l'ID per il selettore CSS e Copia>Copia selettore

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 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 sullo schermo o nel parlato e utilizza selettori per vincolare lo stile Proprietà agli elementi nei documenti HTML.

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

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

Struttura: un selettore rappresenta una struttura che può essere utilizzata come condizione (come in una regola CSS) che determina a quali elementi un selettore corrisponde in un albero di documenti, o come una descrizione semplice del frammento HTML o XML corrispondente a tale struttura.

Tipi: I tipi di selettore includono:

• Universale: il nome qualificato di qualsiasi tipo di elemento (*) Ad esempio, per specificare il nome qualificato di un qualsiasi elemento in lingua inglese nell'albero del documento per qualsiasi spazio dei nomi, immettere:

  *[hreflang|=en]

• Tipo: un prefisso opzionale del componente dello spazio dei nomi anteposto al nome di un elemento (|) Ad esempio, per rappresentare un elemento di intestazione 2 nell'albero del documento, è sufficiente immettere:

  h2

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

  h3[title]

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

  .example { color: green } / all elements with class=example */

• ID: gli attributi dichiarati di tipo ID identificano in modo univoco un elemento con un segno di cancelletto (#) Ad esempio, per rappresentare un selettore ID dove il valore dell'attributo di tipo ID di qualsiasi elemento è "12345", immettere:

  #12345

• Pseudo-classi: Selezione di informazioni esterne all'albero del documento che non possono essere espresse con selettori semplici (:) Ad esempio, per specificare un selettore che rappresenta i link che hanno la classe external e sono già stati visitati, immettere:

  a.external:visited

• Pseudo-elementi: due punti seguiti dal nome di uno pseudo-elemento consentono l'accesso al contenuto oltre l'albero del documento corrente e ne è consentito solo uno per selettore (::)

  Ad esempio, per modificare le lettere della prima riga di ogni elemento p in maiuscole, immettere:

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

• Combinatori: consentono di specificare un percorso gerarchico per mostrare la gerarchia come elementi figlio o fratello ( ) o (+)

  Ad esempio, per indirizzare gli elementi em che sono discendenti degli elementi h1, immettere:

  h1 em.

  Si tratta di una descrizione corretta e valida, ma parziale, del seguente frammento:

  <h1>This <span class="myclass"> headline is <em>very>/em> important</span></h1>

Sintassi: La "grammatica" di base 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 esaustivo: Per ulteriori informazioni, fare riferimento a World Wide Web Consortium (W3C) - Selettori Livello 3: https://drafts.csswg.org/selectors-3/

Argomenti correlati:

• Aggiunta di componenti comuni
• Aggiunta di una pagina a un caso di prova