我需要帮助理解样式表

Question

这是一个家庭作业问题.这不是一个年级(FYI).但我们必须为期末考试研究问题.我失去了这个特殊的问题,需要更好地理解如何得出答案.请看下面的问题:

考虑这个样式表:

.x{ color: blue;}

.y{ font-size: 16pt;}

.z {font-style: italic; color: red;}

将以下文本与其外观相匹配.

A. 16pt
B. red, italic 
C. blue, italic
D. blue

1. < span class=x > TEXT < /span>

2. < span class=y> TEXT < /span>  

3. < span class=x> < span class="z">TEXT< /span > < /span>    

4. < span class=z > < span class=x>TEXT< /span>< /span>  

谁能帮助我更好地理解这一点？

Answer 1

1 - > D(类x包含蓝色)

2 - > A(类y包含16pt font-size属性)

3 - > B(根据CSS优先级,类z将应用于选项3,这将使TEXT为红色和斜体)

4 - > C(将首先应用类z,这将使TEXT变为红色和斜体,然后将应用类x,这将使TEXT变为蓝色)

CSS在行动:

.x {color: blue;}

.y {font-size: 16pt;}

.z {font-style: italic; color: red;}

<span class=x>TEXT</span>

<span class=y>TEXT</span>  

<span class=x><span class=z>TEXT</span></span>    

<span class=z><span class=x>TEXT</span></span>