Rozdiel medzi „: nth-child“, „: first-child“ a „: first-of-type“ v CSS

Odkaz

Podrobné vysvetlenie

Najprv sa pozrime na nasledujúci ukážkový kód HTML, prostredníctvom ktorého pochopíme použitie troch selektorov jeden po druhom.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

„: N-dieťa“ bolo podrobne vysvetlené

Význam css1 vo vyššie uvedenom kóde je druhý podradený prvok a typ je „div“, takže je vybratý iba div1. div1 je druhý podradený prvok v nadradenom kontajneri a typ je „div“. p3 je druhý podradený prvok nadradeného kontajnera, ale nemá typ „div“, takže nie je vybratý. Ak upravíme štýl tak, aby odstránil div pred selektorom, potom sa vyberie aj p3.

„: Prvé dieťa“ podrobne vysvetlené

Význam css2 vo vyššie uvedenom kóde je prvý podradený prvok a typ je p, takže je vybraný iba p1. p1 je prvý podradený prvok v nadradenom kontajneri a typ je „p“. Má to podobný význam ako vyššie uvedené „: n-dieťa“. Ak použijete „: n-dieťa“ na odovzdanie parametra do 1, efekt je úplne rovnaký.

„: Prvý typ“ je podrobne vysvetlené

Význam kódu css3 vo vyššie uvedenom kóde je, že prvý typ je podradený prvok „p“. Rozdiel oproti vyššie uvedeným dvom selektorom je v tom, že sa najskôr nájde zodpovedajúci typ a potom sa získa prvý prvok, ktorý sa zhoduje s typom. . Takže vybrané sú p1 a p3. P1 aj p3 sú prvé prvky „p“ v nadradenom kontajneri.