ຄວາມແຕກຕ່າງລະຫວ່າງ ": nth-child", ": first-child" ແລະ ": first-of-type" ໃນ CSS

ເອກະສານອ້າງອີງ

ຄຳ ອະທິບາຍລະອຽດ

ກ່ອນອື່ນ, ເຮົາມາເບິ່ງລະຫັດຕົວຢ່າງ 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" ທຳ ອິດໃນພາຊະນະພໍ່ແມ່.