განსხვავება CSS– ში ": nth-child", ": first-child" და ": type of first" შორის.

ცნობარი

დეტალური განმარტება

პირველ რიგში, მოდით გადავხედოთ შემდეგ HTML ნიმუშის კოდს, ამ კოდის მეშვეობით ჩვენ სათითაოდ გავიგებთ სამი სელექტორის გამოყენებას.

            <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>
        

": Nth-child" დეტალურად განმარტა

ზემოთ მოცემულ კოდში css1- ის მნიშვნელობა არის მეორე ბავშვის ელემენტი და ტიპი არის "div", ამიტომ მხოლოდ div1 არის არჩეული. div1 არის ბავშვის მეორე ელემენტი მშობლის კონტეინერში და ტიპი არის "div". p3 არის მშობლის კონტეინერის მეორე ბავშვური ელემენტი, მაგრამ ის არ არის ტიპის "div", ამიტომ არ არის არჩეული. თუ სტილს შევცვლით, რომ div ამოვიღოთ ამომრჩეველის წინაშე, მაშინ p3 ასევე აირჩევა.

": პირველი შვილი" დეტალურად განმარტა

Css2- ის მნიშვნელობა ზემოთ მოცემულ კოდში არის პირველი ბავშვის ელემენტი და ტიპი არის p, ამიტომ მხოლოდ p1 არის არჩეული. p1 არის პირველი ბავშვის ელემენტი მშობლის კონტეინერში და ტიპი არის "p". მას მსგავსი მნიშვნელობა აქვს ზემოთ მოცემული ": nth-child". თუ თქვენ იყენებთ ": nth-child" პარამეტრის 1-ზე გადასასვლელად, ეფექტი ზუსტად იგივეა.

დეტალურად: "პირველი ტიპის"

Css3- ის მნიშვნელობა ზემოთ მოცემულ კოდში არის ის, რომ პირველი ტიპი არის "p" - ის ბავშვის ელემენტი. განსხვავება ზემოთ მოცემული ორი ამომრჩეველისგან არის ის, რომ პირველად გვხვდება შესაბამისი ტიპი, შემდეგ მიიღება ტიპთან შესაბამისობის პირველი ელემენტი . ასე რომ, შერჩეულია p1 და p3. ორივე p1 და p3 არის პირველი "p" ელემენტები მშობლის კონტეინერში.