Selettore di pari livello generale - comportamento anomalo

Per quanto ne so, il selettore di fratello generale in CSS seleziona i fratelli discendenti di un elemento.Selettore di pari livello generale - comportamento anomalo

Si consideri il seguente codice:

<head> 
<style> 
h3 ~ div { 
    color: #FF00FF; 
} 
</style> 
</head> 
<body> 
    <h3>Header 3</h3> 
    <div>Sibling divivion</div> 
    <p> 
     <p>Nested paragraph</p> 
     <div>Nested division</div> 
    </p> 
</body>

mi si aspetterebbe il selettore del fratello generale per indirizzare tutti i fratelli discendenti di H3 che sono elementi div.

Qualcuno può spiegare perché è stata selezionata la "Divisione nidificata"? Non penso che sia un fratello di h3?

fonte

2014-12-11 Peter

BTW, non userei il termine "fratelli discendenti" per evitare possibili equivoci; sarebbe più normale dire "seguire i fratelli". –

Il div è in realtà un fratello dell'elemento h3. Non si può avere un elemento p e un elemento div all'interno di un elemento p: "L'elemento P rappresenta un punto Non può contenere a livello di blocco elementi (tra cui P stesso)."

Riferimento: 9.3.1 Paragraphs: the P element

Quando il browser incontra il secondo paragrafo, finirà primo paragrafo, in modo che il secondo paragrafo e l'elemento div finisce dopo il primo paragrafo:

<h3>Header 3</h3> 
<div>Sibling divivion</div> 
<p></p> 
<p>Nested paragraph</p> 
<div>Nested division</div> 
<p></p>

Il tag finale per il paragrafo è facoltativo, quindi un paragrafo termina con un tag finale o dove inizia il successivo elemento del blocco. Il tag di chiusura previsto per il primo paragrafo manca un tag iniziale e termina come un paragrafo separato.

fonte

2014-12-11 22:15:10 Guffa

Oh snap, appena pubblicato lo stesso. +1 –

Grazie! Apprezzo il tuo tempo e la tua spiegazione. – Peter

Selettore di pari livello generale - comportamento anomalo

risposta

Problemi correlati