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

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

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

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

p {
	color: red;
}

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

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

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

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

p {
	color: red;
}
i {
	color: blue;
}

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

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

i {
	color: blue;
}
p {
	color: red;
}

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

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

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

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

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

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

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

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

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

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

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

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

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

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}