เลือกองค์ประกอบทั้งหมดภายในคลาสผู้ปกครอง

.t2 > tbody เลือก <tbody> องค์ประกอบโดยที่พาเรนต์เป็นองค์ประกอบคลาส .t2

tbody > tr เลือกองค์ประกอบ <tr> ทั้งหมดโดยที่องค์ประกอบหลักคือองค์ประกอบ <tbody>

tr > th เลือกองค์ประกอบ <th> ทั้งหมดโดยที่องค์ประกอบหลักคือองค์ประกอบ <tr>

tr > td เลือกองค์ประกอบ <td> ทั้งหมดโดยที่องค์ประกอบหลักคือองค์ประกอบ <tr>

แม้ว่าคุณจะไม่ได้เข้ารหัส <tbody> อย่างชัดเจน แต่เบราว์เซอร์จะเพิ่ม <tbody> เมื่อแสดง

For more info on CSS selectors, please refer to here.

<style>
  body {
    background-color: skyblue;
  }
  
  .t2 > tbody > tr > th,
  .t2 > tbody > tr > td {
    border: 1px solid white;
  }
</style>

<table class="t2">
  <tr>
    <th>Column 1</th>

  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>

  </tr>


</table>

การใช้ตัวเลือกเชิงสัมพันธ์ (ตัวเลือกที่ขึ้นอยู่กับการเรียงลำดับองค์ประกอบบนเพจ) ไม่แนะนำอย่างยิ่ง เนื่องจากตัวเลือกเหล่านี้เสียหายได้ง่ายจากการเปลี่ยนแปลงเค้าโครงหรือการเพิ่มองค์ประกอบของหน้าใหม่ คุณต้องการเพิ่ม ID เฉพาะหรือคลาสที่กำหนดเอง เพื่อให้การเปลี่ยนแปลงในอนาคตไม่ทำให้งานก่อนหน้าของคุณเสียหาย

เท่าที่ฉันทราบ tr ไม่ได้ใช้สไตล์เส้นขอบโดยไม่ใช้การยุบเส้นขอบ ดูที่นี่: เหตุใด TR จึงไม่มีสไตล์

นอกจากนี้ ตัวเลือก > ใน CSS จะใช้กับลูก ทันที ของสไตล์ที่ระบุเท่านั้น เนื่องจาก td และ th เป็นลูกขององค์ประกอบ tr จึงไม่ถูกหยิบขึ้นมา คุณอาจต้องการใช้:

.t2 td, th{
  border: 1px solid white;
}

แทน ซึ่งควรใช้สไตล์กับลูกที่ซ้อนกันของ .t2 เช่นกัน