CSS การเลือกเลือกดูดซับ

selector ที่มีความเกี่ยวข้อง

ด้วยการกำหนดรูปแบบตามองค์ประกอบขององค์ประกอบในสภาพแวดล้อมของมัน คุณสามารถทำให้การทำเครื่องหมายเรียบร้อยขึ้น

ใน CSS1 ตัวเลือกที่ใช้ในการนำกฎต่อไปนี้เรียกว่า selector ที่มีความเกี่ยวข้อง (contextual selectors) นี้เพราะพวกมันพึงขึ้นบนความเกี่ยวข้องของสภาพแวดล้อมเพื่อใช้หรือหลีกเลี่ยงกฎบางอย่าง ใน CSS2 พวกมันเรียกว่า selector ที่มีความเกี่ยวข้อง แต่ไม่ว่าคุณเรียกพวกมันอย่างไร พวกมันทำงานในแง่เดียวกัน

selector ที่อนุญาตให้คุณกำหนดรูปแบบของตามองค์ประกอบในสภาพแวดล้อมของเอกสารนี้ ทำให้การใช้ selector นี้ทำให้รหัส HTML ของคุณเรียบร้อยขึ้น

ตัวอย่างเช่น หากคุณต้องการให้องค์ประกอบ strong ในรายการเป็นอักษรสองแบบ ไม่ใช่อักษรหนัก คุณสามารถกำหนด selector ที่มีความเกี่ยวข้องดังนี้:

li strong {
    font-style: italic;
    font-weight: normal;
  }

โปรดสังเกตความเกี่ยวข้องของรหัสสีน้ำเงินที่มีการทำเครื่องหมายด้วย <strong>:

<p><strong>ฉันคือตัวอย่างของอักษรหนัก ไม่ใช่อักษรสองแบบ เพราะฉันไม่อยู่ในรายการ ดังนั้นกฎนี้ไม่มีผลต่อฉัน</strong></p>
<ol>
<li><strong>ฉันคือตัวอย่างของอักษรสองแบบ นี่เพราะองค์ประกอบ strong ตั้งอยู่ด้วยในองค์ประกอบ li</strong></li>
<li>ฉันคือตัวอย่างของตัวหนังสือปกติ</li>
</ol>

ในตัวอย่างที่ผ่านมา มีเพียงแค่องค์ประกอบ li ซึ่งมีองค์ประกอบ strong ที่มีรูปแบบเป็นอักษรสองแบบ ไม่จำเป็นต้องกำหนด class หรือ id พิเศษแก่องค์ประกอบ strong นี้ ซึ่งทำให้รหัสไซต์ของคุณเรียบร้อยขึ้น

ดูแบบระบุ CSS ต่อไปนี้:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

ต่อไปนี้คือ HTML ที่มีผลกระทบต่อมัน:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

เนื้อหาที่เกี่ยวข้อง

หากคุณต้องการเรียนรู้เกี่ยวกับเจ้าหน้าที่ดูดซับ มาอ่านสิ่งต่อไปนี้ในตัวอย่างอาวุโส CodeW3C.com: