การสืบทอดคุณสมบัติ CSS

สมมติว่าเรามีย่อหน้า และภายในนั้นมีข้อความบางส่วน อยู่ในแท็ก i:

html<p>
  This is some <i>text</i> in paragraph.
</p>

ลองกำหนดสีแดงให้กับย่อหน้ากัน:

cssp {
  color: red;
}

ผลลัพธ์ที่ได้คือ ไม่เพียงแต่ข้อความในย่อหน้าเท่านั้นที่จะเปลี่ยนเป็นสีแดง ข้อความในแท็ก i ก็จะเปลี่ยนเป็นสีแดงด้วย:

ทั้งหมดนี้เป็นเพราะคุณสมบัติ color นั้นสามารถสืบทอดได้ นั่นหมายความว่าหาก แท็กแม่มีการกำหนดสีบางสีไว้ สีนั้นก็จะถูกส่งต่อไปยังแท็กลูกด้วย ไม่ใช่คุณสมบัติ CSS ทุกข้อ ที่สามารถสืบทอดได้ แต่มีหลายคุณสมบัติที่สืบทอดได้ (จากที่ คุณรู้จักมาแล้ว - ทุกข้อสืบทอดได้)

อย่างไรก็ตาม หากต้องการ เราสามารถเขียนทับคุณสมบัติ ของแท็กแม่ได้ โดยการกำหนดซีเลกเตอร์สำหรับแท็กลูก ตัวอย่างเช่น ลองกำหนดสีแดงให้ย่อหน้า และกำหนดสีน้ำเงินให้ตัวเอียง:

html<p>
  This is some <i>text</i> in paragraph.
</p>
cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

ลำดับของซีเลกเตอร์ในโค้ด CSS ในกรณีนี้ ไม่มีผล หากสลับตำแหน่งของ ซีเลกเตอร์ i และซีเลกเตอร์ p ทุกอย่างก็ยังคงทำงาน เหมือนเดิม:

html<p>
  This is some <i>text</i> in paragraph.
</p>
cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก b จะมีสีอะไร:

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssp {
  color: blue;
}
Задание 2

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก b จะมีสีอะไร:

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssp {
  color: blue;
}
b {
  color: red;
}
Задание 3

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก b จะมีสีอะไร:

html<p>
  This is some <b>text</b> in paragraph.
</p>
cssb {
  color: red;
}
p {
  color: blue;
}
Задание 4

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก li จะมีสีอะไร:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
cssul {
  color: blue;
}
Задание 5

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก li จะมีสีอะไร:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
cssul {
  color: blue;
}
li {
  color: red;
}
Задание 6

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก i จะมีสีอะไร:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>
cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}
Задание 7

หลังจากศึกษารหัสแล้ว กรุณาบอกว่าข้อความในแท็ก i จะมีขนาดเท่าใด:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>
cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}