Does>: first-child funziona se il tipo è noto o sconosciuto?

Question

Ho letto Is there a CSS selector for the first direct child only? e http://www.w3schools.com/cssref/css_selectors.asp

mi sa che devo applicare l'effetto del primo figlio del tag <h1>, ma non riuscivo a farlo funzionare. Quindi, invece, sto cercando di usare lo nth-child, ma ancora senza fortuna.

JSFiddle

<section> 
<article> 
    <h1>Test Details</h1> 
     <ul> 
      <li>Layer This</li> 
      <li>Layer That</li> 
      <li>Layers</li> 
     </ul> 
</article> 
</section> 

<section> 
    <article> 
     <h1>Campaign details</h1> 
     <p>Text</p> 
    </article> 
</section> 

CSS

section { 
    padding:30px; 
} 

section article { 
    background:#EBEBEB; 
} 

section article h1 { 
    background:#0C79CB; 
    padding:10px; 
} 

/* This is where I am struggling */ 
section article h1:nth-child(2):before { 
    background-color:white !important; 
    content:''; 
    height:10px; 
    display:block; 
} 

Se si apre il violino, si noterà che l'intestazione ha uno sfondo blu, e il contenuto ha uno sfondo grigio. Tutto quello che sto cercando di fare è quello di 'inserto' una linea di bianco:

attuale:

desiderata (nota bianco tra il blu e il grigio)

Si noti che questo è abbastanza banale se aggiungo un nuovo div a una classe, o addirittura aggiungo un border-bottom:solid 5px white; al tag <h1>, il punto è che sto cercando di conoscere C I selettori SS sono quindi possibili con i selettori CSS?

Answer 1

:first-child può essere utilizzato con o senza conoscere il tipo di elemento.

È possibile sia fare parent > :first-child per adattarsi a qualsiasi primo figlio, qualunque sia il tipo di nodo è, o si può fare parent > p:first-child di corrispondere solo il primo figlio se si tratta di un tag p.

Puoi anche fare parent > p:first-of-type per abbinare il primo p all'interno di parent, anche se non è il primo figlio.

Answer 2

Nel tuo esempio, stai provando a selezionare il secondo figlio di h1, ma quell'elemento non ha figli, e quindi fallisce. È necessario selezionare il secondo figlio del genitore del h1

section article :nth-child(2):before 

Questo ha il vantaggio che non mettere qualsiasi nome di tag in là, in modo da funzionare anche se un giorno cambierai il h1 a un h2, per esempio. Questo ultimo selettore potrebbe essere riscritto anche

section article :first-child:after 

Non è la stessa cosa, ma è anche possibile aggiungere contenuti generati dopo un elemento (e nel tuo caso andrà tutto bene e lavorare nello stesso modo).

Oppure, se si desidera far corrispondere qualcosa contro la h1, è necessario indirizzare la sua prossima fratello, con il selettore fratello

section article h1 + *:before 

Questo selettore sceglierà il primo elemento (qualunque esso sia) che appare subito dopo lo h1.

Oppure, l'inserimento di contenuto generato dopo l'elemento, è possibile utilizzare questo

section article h1:after { 
    background-color: white !important; 
    content: ''; 
    height: 10px; 
    display: block; 
} 

che, a mio parere, è la cosa più semplice da fare

Answer 3

Per completare l'esempio che si sta tentando con elementi pseudo :

• E 'possibile utilizzare :nth-child(1) per selezionare il primo bambino come :first-child. Nota: In questo esempio non ha senso, poiché sarà disponibile solo uno <h1> per <article>.

• section article h1 è dato position: relative ed è position: absolute i bambini saranno posizionati in relazione ad esso.

• Il :after è dato position: absolute e width: 100% al fine di creare una linea alla parte inferiore del vostro <h1> sfondo.

Ricordate che gli elementi :after e :before pseudo sono l'equivalente di:

<h1> 
    <span>This is the :before</span> 
     I am the heading 
    <span>This is the :after</span> 
</h1> 

Have an example

CSS

section article h1 { 
    background:#0C79CB; 
    padding:10px 10px 20px; 
    position: relative; 
} 
/* 
-- Select the first h1 child of article and generate a pseudo element. 
*/ 
section article h1:nth-child(1):after { 
    background-color:white; 
    content:''; 
    height:10px; 
    width: 100%; 
    display:block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}