: Erstes Kind arbeitet nicht wie erwartet

96

Ich versuche, die erste h1innerhalb einer divmit einer Klasse namens auszuwählen detail_container. Es funktioniert, wenn h1es das erste Element in diesem ist div, aber wenn es danach kommt ul, wird es nicht funktionieren.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Ich hatte den Eindruck, dass das CSS, das ich habe, das erste auswählen wird, h1egal wo es sich befindet div. Wie kann ich es zum Laufen bringen?

css css-selectors Der Muffin-Mann
quelle
1
Was auch immer CSS nicht kann, JavaScript kann.
JCOC611
11
Dies ist etwas, was Sie mit CSS3 tun können :)
BoltClock

Antworten:

216

Der h1:first-childSelektor bedeutet

Wählen Sie
genau dann das erste untergeordnete h1Element des übergeordneten Elements aus, wenn es sich um ein Element handelt.

Das :first-childdes Containers hier ist das ulund kann als solches nicht befriedigen h1:first-child.

Es gibt CSS3s :first-of-typefür Ihren Fall:

.detail_container h1:first-of-type
{
    color: blue;
}

Aber mit Problemen mit der Browserkompatibilität und so weiter ist es besser, dem ersten h1eine Klasse zu geben und dann auf diese Klasse abzuzielen :

.detail_container h1.first
{
    color: blue;
}
BoltClock
quelle
2
Ich verstehe jetzt, obwohl ich denke, dass sie beide Versionen hätten implementieren sollen, als sie den Standard erstellt haben.
Der Muffin-Mann
Funktioniert nicht in IE9 Release. Es heißt h1: unbekannt im Entwicklertool
Cine
11
Kompatibilitätsliste des :first-of-typeSelektors.
Jess Telford
4
Neuere Kompatibilitätsliste von :first-of-type. Alter Link ist falsch.
BadHorsie
Meiner Ansicht nach ist der Begriff :first-childnicht klar zu verstehen, da Sie das Element beispielsweise als CSS-Selektor definieren h1und anschließend denken, dass Sie das erste Kind von allen in der ausgewählten DOM-Ebene nehmen. Ich habe es so oft falsch benutzt ... Wir müssen uns an den :first-of-typeSelektor gewöhnen und an das erste Kind dieser Art denken .
Kai Noack
13

:first-childwählt das erste h1 genau dann aus, wenn es das erste untergeordnete Element seines übergeordneten Elements ist. In Ihrem Beispiel ist das uldas erste Kind der div.

Der Name der Pseudoklasse ist etwas irreführend, wird aber hier in der Spezifikation ziemlich klar erklärt .

Mit dem :firstSelektor von jQuery erhalten Sie, wonach Sie suchen. Du kannst das:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
quelle
Ihr Recht, es ist irreführend. Ich war hauptsächlich verwirrt, weil ich zuvor jQuery verwendet habe.
Der Muffin-Mann
9

Für diesen speziellen Fall können Sie verwenden:

.detail_container > ul + h1{ 
    color: blue; 
}

Aber wenn Sie in vielen Fällen denselben Selektor benötigen, sollten Sie eine Klasse für diese haben, wie BoltClock sagte.

Grekz
quelle
Sie sollten keine Probleme haben. Hier der Ref w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

Sie können auch verwenden

.detail_container h1:nth-of-type(1)

Durch Ändern der Nummer 1 durch eine andere Nummer können Sie ein beliebiges anderes h1-Element auswählen.

Fabrice
quelle
1

Sie könnten Ihre h1Tags in ein anderes einwickeln, divund dann wäre das erste das first-child. Das divbraucht nicht einmal Stile. Es ist nur eine Möglichkeit, diese Kinder zu trennen.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
quelle
0

Das Element kann nicht direkt vom <body>Tag erben . Sie können versuchen, es in ein <dir style="padding-left:0px;"></dir>Tag einzufügen.

Edmond Chow
quelle