CSS හි ": nth-child", ": first-child" සහ ": first-of-type" අතර වෙනස

යොමුව

සවිස්තරාත්මක පැහැදිලි කිරීම

පළමුව, පහත දැක්වෙන 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" ට සමාන අර්ථයක් ඇත. පරාමිතිය 1 ට සම්මත කිරීමට ඔබ ": nth-child" භාවිතා කරන්නේ නම්, බලපෑම හරියටම සමාන වේ.

": පළමු වර්ගයේ" විස්තරාත්මකව විස්තර කර ඇත

ඉහත කේතයේ css3 හි තේරුම නම් පළමු වර්ගය "p" හි ළමා අංගයකි.එම ඉහත තේරීම්කරුවන් දෙදෙනාගේ වෙනස වන්නේ අනුරූප වර්ගය පළමුව සොයා ගැනීමයි, ඉන්පසු වර්ගයට ගැලපෙන පළමු අංගය ලබා ගනී. . එබැවින් තෝරාගත් ඒවා p1 සහ p3 වේ. P1 සහ p3 යන දෙකම මව් බහාලුම්වල පළමු "p" අංග වේ.