css-selectors header - Selettore '>' CSS;che cos'è?




html example (7)

È un selettore di bambini.

Corrisponde a quando un elemento è figlio di un elemento. È composto da due o più selettori separati da ">".

Esempio (s):

La seguente regola definisce lo stile di tutti gli elementi P che sono figli di BODY:

body > P { line-height: 1.3 }

Esempio (s):

L'esempio seguente combina selettori discendenti e selettori figlio:

div ol>li p

Corrisponde a un elemento P che è un discendente di una LI; l'elemento LI deve essere il figlio di un elemento OL; l'elemento OL deve essere un discendente di un DIV. Si noti che lo spazio bianco opzionale attorno al combinatore ">" è stato omesso.

Possibile duplicato:
Cosa significa ">" nelle regole CSS?

Ho visto il "più grande di" ( > ) usato nel codice CSS alcune volte, ma non riesco a capire cosa faccia. Che cosa fa?



> seleziona tutti i discendenti diretti / figli

Uno spazio il selettore selezionerà tutti i discendenti profondi mentre un selettore maggiore di > selezionerà solo tutti i discendenti immediati. Vedi il violino per esempio.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>


È il selettore di bambini CSS. Esempio:

div > p seleziona tutti i paragrafi che sono figli diretti di div.

Vedi this


Significa genitore / figlio

esempio:

html> body

sta dicendo che il corpo è figlio di html

Partenza: Selectors


> seleziona i bambini immediati

Ad esempio, se hai div nidificati come questi:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

e dichiari una regola css nel tuo foglio di stile come tale:

.outer > div {
    ...
}

le tue regole si applicano solo a quelle div che hanno una classe di "middle" poiché quelle div sono discendenti diretti (figli immediati) di elementi con classe "outer" (a meno che, ovviamente, tu dichiari altre regole più specifiche che prevalgono su queste regole) . Vedi il violino.

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

Nota a margine

Se tu, invece, avessi uno spazio tra i selettori anziché > , le tue regole si applicano a entrambe le div nidificate. Lo spazio è molto più comunemente usato e definisce un "selettore discendente", il che significa che cerca qualsiasi elemento corrispondente lungo l'albero piuttosto che solo i bambini immediati come fa il > .

NOTA: il selettore > non è supportato da IE6. Funziona in tutti gli altri browser correnti, inclusi IE7 e IE8.

Se stai guardando i selettori CSS meno ben utilizzati, potresti anche voler dare un'occhiata ai selettori + , ~ e [attr] , che possono essere molto utili.

Questa pagina contiene un elenco completo di tutti i selettori disponibili, insieme ai dettagli del loro supporto in vari browser (principalmente IE che presenta problemi) e buoni esempi del loro utilizzo.


È il selettore fratello adiacente.

Dal blog di Splash of Style.

Per definire un selettore adiacente CSS, viene utilizzato il segno più.

h1+p {color:blue;}

Il suddetto codice CSS formatterà il primo paragrafo dopo (non all'interno) qualsiasi titolo h1 come blu.

h1>p seleziona qualsiasi elemento p che sia un elemento diretto (prima generazione) (all'interno) di un elemento h1 .

  • h1>p corrisponde a <h1> <p></p> </h1> ( <p> all'interno <h1> )

h1+p seleziona il primo elemento p che è un fratello (allo stesso livello del dom) come un elemento h1 .

  • h1+p corrisponde a <h1></h1> <p><p/> ( <p> accanto a / dopo <h1> )




css css-selectors