CSS-Selektor des ersten Kindes, wenn mehrere existieren

Question

Ich habe dies als Teil einer meiner Tabellen.

<header> 
    <h1>...</h1> 
    <p>...</p> 
    <p>...</p> 
    <h2>...</h2> 
    <dl> 
    <dt>...</dt> 
    <dd>...</dd> 
    </dl> 
    <dl> 
    <dt>...</dt> 
    <dd>...</dd> 
    </dl> 
</header> 

Wie kann ich nur das erste dt auswählen? Der, der Kalorien enthält?

Answer 1

dl:first-child dt { 
    // ... 
} 

Da die dl ist nicht das erste Kind wie in den Kommentaren beschrieben, können Sie einen anderen Selektor benötigen:

dl:first-of-type dt { 
    // ... 
} 

Oder — nur die dt eine Klasse geben.

Answer 2

können Sie mögen dieses versuchen

dl > dt:first-child{ 
    background-color:red; 
} 

es jeden ersten <dt> Element background-color unter <dl> Element verwendet, wird rot.