ភាពខុសគ្នារវាង ": nth-child", ": កូនដំបូង" និង ": ប្រភេទទីមួយ" នៅក្នុង 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>
        

": ទី - កូន" បានពន្យល់លម្អិត

អត្ថន័យនៃ css1 នៅក្នុងកូដខាងលើគឺជាធាតុកូនទី ២ ហើយប្រភេទគឺ“ div” ដូច្នេះមានតែ div1 ប៉ុណ្ណោះដែលត្រូវបានជ្រើសរើស។ div1 គឺជាធាតុកូនទីពីរនៅក្នុងធុងមេហើយប្រភេទគឺ "div" ។ p3 គឺជាធាតុកូនទីពីរនៃកុងតឺន័រមេប៉ុន្តែវាមិនមែនជាប្រភេទ "div" ទេដូច្នេះវាមិនត្រូវបានជ្រើសរើសទេ។ ប្រសិនបើយើងកែប្រែស្ទីលដើម្បីយក div នៅពីមុខអ្នកជ្រើសរើសបន្ទាប់មក p3 ក៏នឹងត្រូវបានជ្រើសរើសដែរ។

": កូនច្បង" បានពន្យល់លម្អិត

អត្ថន័យនៃ css2 នៅក្នុងក្រមខាងលើគឺជាធាតុដំបូងរបស់កុមារហើយប្រភេទគឺ p ដូច្នេះមានតែ p1 ប៉ុណ្ណោះដែលត្រូវបានជ្រើសរើស។ p1 គឺជាធាតុដំបូងរបស់កូននៅក្នុងធុងមេហើយប្រភេទគឺ“ p” ។ វាមានអត្ថន័យប្រហាក់ប្រហែលនឹងពាក្យខាងលើនេះ៖ ៈ nth-child ។ ប្រសិនបើអ្នកប្រើ“: nth-child” ដើម្បីបញ្ជូនប៉ារ៉ាម៉ែត្រទៅ ១ ផលប៉ះពាល់គឺពិតជាដូចគ្នា។

": ប្រភេទទីមួយ" បានពន្យល់លម្អិត

អត្ថន័យនៃ css3 នៅក្នុងលេខកូដខាងលើគឺថាប្រភេទទី ១ គឺជាធាតុរបស់កូន "ភី" ភាពខុសគ្នានៅទីនេះពីអ្នកជ្រើសរើសពីរខាងលើគឺប្រភេទដែលត្រូវគ្នាត្រូវបានរកឃើញដំបូងហើយបន្ទាប់មកធាតុទីមួយដែលត្រូវនឹងប្រភេទត្រូវបានទទួល ។ ដូច្នេះអ្នកដែលបានជ្រើសរើសគឺ p1 និង p3 ។ ទាំង p1 និង p3 គឺជាធាតុដំបូង "ទំ" នៅក្នុងកុងតឺន័រមេ។