Che cosa significa il selettore CSS “>” (più grande del segno)?

Per esempio:

div > p.some_class { /* Some declarations */ } 

Che cosa significa esattamente il segno > ?

> è il combinatore figlio , a volte erroneamente chiamato combinatore discendente diretto. 1

Ciò significa che il selettore div > p.some_class seleziona solo i paragrafi di .some_class che sono nidificati direttamente all’interno di un div e non tutti i paragrafi che sono nidificati ulteriormente all’interno.

Un’illustrazione:

 

Some text here

More text here

Cosa è selezionato e cosa non lo è:

  1. Selezionato
    Questo p.some_class si trova direttamente all’interno del div , quindi viene stabilita una relazione genitore-figlio tra entrambi gli elementi.

  2. Non selezionato
    Questa p.some_class è contenuta da un blockquote all’interno del div , piuttosto che dal div stesso. Sebbene questo p.some_class sia un discendente del div , non è un bambino; è un nipote.

    Di conseguenza, mentre div > p.some_class non corrisponde a questo elemento, div p.some_class , utilizzando invece il combinatore discendente .


Molte persone vanno oltre a chiamarlo “bambino diretto” o “bambino immediato”, ma questo è completamente inutile (e incredibilmente fastidioso per me), perché un elemento figlio è comunque per definizione immediato , quindi intendono la stessa identica cosa. Non esiste un “bambino indiretto”.

> (segno maggiore di) è un CSS Combinator.

Un combinatore è qualcosa che spiega la relazione tra i selettori.

Un selettore CSS può contenere più di un semplice selettore. Tra i selettori semplici, possiamo includere un combinatore.

Ci sono quattro diversi combinatori nei CSS3:

  1. selettore discendente (spazio)
  2. selettore di bambini (>)
  3. selettore fratello adiacente (+)
  4. selettore di fratello generale (~)

Nota: < non è valido nei selettori CSS.

inserisci la descrizione dell'immagine qui

Per esempio:

       

Paragraph 1 in the div.

Paragraph 2 in the div.

Paragraph 3 in the div.

Paragraph 4. Not in a div.

Paragraph 5. Not in a div.

Produzione:

inserisci la descrizione dell'immagine qui

Ulteriori informazioni su CSS Combinators

Come altri citano, è un selezionatore di bambini. Ecco il link appropriato.

http://www.w3.org/TR/CSS2/selector.html#child-selectors

some_class agli elementi p con class some_class che sono direttamente sotto un div .

Tutti i tag p con class some_class che sono figli diretti di un tag div .

html

 

lohrem text (it will be of red color )

lohrem text (it will NOT be of red color)

lohrem text (it will be of red color )

css

 div > p.some_class{ color:red; } 

Tutti i bambini diretti che sono

con .some_class otterrebbero lo stile applicato a loro.

(selettore figlio) è stato introdotto in css2. div p {} seleziona tutti gli elementi p decedenti degli elementi div, mentre div> p seleziona solo elementi figlio p, non grand’fam e pronipoti su così via.

  

para tag, child and decedent of p.

  • para inside list.

Per ulteriori informazioni su CSS Ce [iettori e il loro uso, controlla il mio blog, i selettori css e i selettori css3