Il miglior tutorial selettori CSS Nel 2024, in questo tutorial puoi imparare selettori CSS
selettori CSS sono utilizzati per selezionare gli elementi che si desidera modello di stile.
colonna "CSS" indica, in cui le proprietà CSS definiti (CSS1, CSS2, CSS3 o).
selettore | esempio | esempio spettacoli | CSS |
---|---|---|---|
. Classe | .intro | Selezionare tutte le class = elemento "intro" | 1 |
# Id | #firstname | Selezionare tutti gli elementi id = "Nome" | 1 |
* | * | Selezionare tutti gli elementi | 2 |
elemento | p | Selezionare tutti gli elementi <p> | 1 |
elemento, elemento | div,p | Selezionare tutti gli elementi <div> e il <p> elemento | 1 |
elemento elemento | div p | Selezionare <div> tutti gli elementi <p> all'interno dell'elemento | 1 |
element> Elemento | div>p | Seleziona tutto il genitore è un elemento <div> dell'elemento <p> | 2 |
element + | div+p | Seleziona elemento <p> seguito da tutti i <div> elementi dopo | 2 |
[Attributo] | [target] | Selezionare tutti gli elementi con l'attributo target | 2 |
[Attributo = valore] | [target=-blank] | Seleziona tutto l'uso target = - elemento "vuoto" di | 2 |
[Attributo ~ = value] | [title~=flower] | Selezionare tutti gli elementi dell'attributo titolo contiene la parola "fiore" di | 2 |
[Attributo | = lingua] | [lang|=en] | Selezionare tutti gli elementi di un lang valore di start = "IT" di | 2 |
: Link | a:link | Selezionare tutti i collegamenti non visitati | 1 |
: visited | a:visited | Selezionare tutti i link visitati | 1 |
: attiva | a:active | Selezionare il link attivo | 1 |
: hover | a:hover | Quando si seleziona il mouse sul link qui sopra | 1 |
: focus | input:focus | Selezionare l'elemento di input ha il focus | 2 |
: First-letter | p:first-letter | Selezionare la prima lettera di ogni <P> elemento | 1 |
: First-line | p:first-line | Selezionare ogni <P> Il primo elemento di linea | 1 |
: First-child | p:first-child | Specificata solo quando <p> elemento è il primo figlio del suo stile principale. | 2 |
: prima | p:before | Inserisci contenuto prima di ogni elemento <p> | 2 |
: dopo | p:after | Inserisci contenuto dopo ogni <p> elemento | 2 |
: Lang (lingua) | p:lang(it) | Selezionare un attributo lang valore di start = "it" tutti gli elementi <p> | 2 |
element1 ~ element2 | p ~ ul | Ogni elemento scelta p ul dopo elemento | 3 |
[Attributo ^ = valore] | un [src ^ = "https"] | Selezionare ogni valore di attributo src per "https" all'inizio dell'elemento | 3 |
[Attributo $ = valore] | un [src = $ ". pdf"] | Selezionare ogni valore di attributo src per ".pdf" alla fine dell'elemento | 3 |
[Attributo * = valore] | un [src = * "w3big"] | Selezionare ogni elemento src valore di attributo contiene la stringa "w3big" di | 3 |
: First-of-type | p: first-of-type | Selezionare ogni elemento p p è il primo elemento del suo genitore | 3 |
: Last-of-type | p: last-of-type | Selezionare ogni elemento p è l'ultimo elemento del suo genitore p | 3 |
: Only-of-type | p: only-of-type | Selezionare ogni elemento p è l'unico elemento del suo genitore p | 3 |
: Solo-bambino | p: solo ai bambini | Selezionare ogni elemento p è l'unico elemento figlio del suo genitore | 3 |
: Nth-child (n) | p: nth-child (2) | Selezionare ogni elemento p è il secondo figlio del suo genitore | 3 |
: Nth-last-child (n ) | p: nth-last-child (2) | Selezionare ogni elemento p è il secondo figlio del suo genitore, contando dall'ultimo bambino | 3 |
: Nth-of-type (n ) | p: nth-of-type (2) | Selezionare ogni elemento p è il secondo elemento p del suo genitore | 3 |
: Nth-last-of-type (n) | p: nth-last-of-type (2) | Selezionare ogni elemento p è il secondo elemento p del suo genitore, contando dall'ultimo bambino | 3 |
: Last-child | p: last-child | Selezionare ogni elemento p è l'ultimo figlio del suo genitore. | 3 |
: root | : Root | Selezionare l'elemento radice del documento | 3 |
: vuoto | p: empty | Selezionare ogni dell'elemento P non ha figli (inclusi i nodi di testo) | 3 |
: bersaglio | #news: bersaglio | Selezionare l'elemento #news attualmente attivo (compresa la URL di ancoraggio nome cliccabile) | 3 |
: abilitato | Ingresso: abilitato | Selezionare ogni elemento di input abilitato | 3 |
: disabilitato | Ingresso: disabilitato | La selezione di ogni elemento di input disattivato | 3 |
: selezionata | Ingresso: selezionata | Selezionare ogni elemento di input selezionato | 3 |
: Non (selettore) | : Not (p) | Selezionare ogni elemento non è elementi p | 3 |
:: selezione | :: Selezione | Elemento viene selezionata o evidenziata nello stato della corrispondenza parziale utente | 3 |
: Out-of-range | : Out-of-range | elemento di input valore corrispondente di fuori del campo specificato | 3 |
: In-range | : In-range | Abbinamento elemento di input valore all'interno della gamma specifica della | 3 |
: Lettura-scrittura | : Lettura e scrittura | Ha usato per abbinare elemento di lettura e scrittura | 3 |
: Sola lettura | : Sola lettura | Per abbinabili "sola lettura" (read-only) elemento di attributo | 3 |
: opzionale | Optional: | Per corrispondenza elemento di input opzionale | 3 |
: necessaria | : Richiesto | Impostazioni per l'elemento "richiesta" di proprietà | 3 |
: valida | : valido | Usato per corrispondere al valore di ingresso è un elemento di legittima | 3 |
: non valido | : non valido | Valore non ammesso per le partite elemento di input | 3 |