2017-12-31 178 views
3

Hier ist mein CodeKann nicht das erste Kind wählen in css

div p:first-child{ 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

ich der erste Absatz soll einen linken Rand haben. Nach dieser MDN Seite kann dies unter Verwendung first-child getan werden, aber meins funktioniert aus irgendeinem Grund nicht.

Was ist falsch daran?

Antwort

5

Der :first-child Wähler wählt nur das erste Kind seiner Eltern unabhängig vom Typ. Ihr <p> ist das dritte Kind seines <div> übergeordneten Elements. Um das erste Kind eines bestimmten Typs auszuwählen, verwenden Sie die :first-of-type statt:

div p:first-of-type { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

EDIT Um zu klären, wie :first-child funktioniert, wenn Sie div p:first-child sagen, du bist nicht die erste p Auswahl Kind von irgendwelchen div. Sie wählen immer noch das erste Kind eines beliebigen div aus, aber nur, wenn dieses Kind zufällig ist. Es ist also eine Art zusätzliche Einschränkung. Im folgenden Beispiel habe ich einen cyanfarbenen Hintergrund für :first-child verwendet. Sie können sehen, dass es auf die beiden Titel angewendet wurde, obwohl sie unterschiedliche Typen haben. Dann habe ich einen roten Rahmen für p:first-child verwendet. Sie können sehen, dass es dieses Mal nur auf den zweiten Titel angewandt habe, weil es p ist, und es nicht auf den ersten Titel gelten, weil es nicht p ist (dh es ist h3):

div :first-child { 
 
    background-color: #0ff; 
 
} 
 

 
div p:first-child { 
 
    border: 1px solid #f00; 
 
}
<div> 
 
    <h3>This is my first Article</h3> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div> 
 
<div> 
 
    <p>This is my second Article</p> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

+0

Ah. Aha. Also ist das 'p' in' p: first-child' hier irgendwie überflüssig, oder? –

+1

Nicht genau. 'p: first-child' _only_ wendet Formatierung an, wenn das erste Kind des' div' zufällig ein 'p'-Element ist. Dies kann in vielen Situationen nützlich sein (nur nicht von Ihnen!) – Sam

+1

Nein, es ist nicht redundant, aber es tut nicht, was Sie denken, dass es tut. Wenn Sie es nicht verwenden, wird der Stil auf jedes erste Kind jedes "div" angewendet. Wenn Sie es verwenden, wird es nur dann auf jedes Kind jedes "div" angewendet, wenn das erste Kind "p" ist. Eine ausführliche Erklärung und ein Beispiel finden Sie in meiner Bearbeitungsantwort. –

1

Sie sind in der Nähe, aber die <p> ist nicht das erste Kind des <div> - die <h3> ist, so dass die <p> nicht durch first-child ausgewählt werden.

Probieren Sie es nth-child mit:

div p:nth-child(3) { 
 
    border-left: 5px solid #bdc3c7; 
 
}
<div> 
 
    <h3>1 January 2018</h3> 
 
    <h1>This is my first Article</h1> 
 
    <p>First</p> 
 
    <p>Second</p> 
 
    <p>Third</p> 
 
</div>

3

:first-child nur Elemente auswählt, die das erste Kind ihrer Eltern sind. Ihr <p> ist das dritte Kind Ihres <div>, so dass es nicht funktioniert.

Versuchen Sie es mit :first-of-type statt:

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 
1

Der Absatz ist nicht das erste Kind.

Versuchen mit:

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 

Oder was dasselbe ist:

div p:nth-of-type(1) { ... } 
1

Sie entweder div p:nth-child(3) verwenden können, oder können Sie div p:first-of-type oder so verwenden, es wird funktionieren.

Die Pseudoklasse :first-of-type CSS repräsentiert das erste Element dieses Typs in einer Gruppe von gleichrangigen Elementen.

Die Pseudoklasse :nth-child() CSS passt ein oder mehrere Elemente basierend auf ihrer Position in einer Gruppe von Geschwistern an.

Dokumentation für :nth-child()here.

Dokumentation für :first-of-typehere.

Für die Verwendung von :first-of-type Verwendung:

div p:first-of-type { 
    border-left: 5px solid #bdc3c7; 
} 

Oder mit :nth-child(3) Verwendung:

div p:nth-child(3) { 
    boder-left: 5px solid #bdc3c7; 
}