Мне нужна помощь в понимании таблиц стилей

Question

Это вопрос домашней работы. Это не для класса (FYI). Но мы должны изучить вопросы для нашего финального экзамена. Я потерял этот конкретный вопрос и должен лучше понять, как получить ответы. Пожалуйста, смотрите вопрос ниже:

Рассмотрим таблицу стилей:

.x{ color: blue;} 

.y{ font-size: 16pt;} 

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

Match следующий текст с его внешним видом.

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

класс = х соответствует .x из таблицы стилей

поэтому, когда вы видите класс = х из HTML в вопрос, который вы должны смотреть назад в таблицу стилей. В таблице стилей вы можете видеть, что атрибуту цвета присваивается значение синего. Теперь ТЕКСТ, к которому применяется этот стиль, будет синим.

следовать той же процедуре для остальной части вопросов

Answer 2

1 -> D (класс х содержит синий цвет)

2 -> A (класс у содержит 16pt свойство размера шрифта)

3 -> в (согласно CSS старшинства, класс г будет применен к варианту 3, который будет сделать текст красным цветом и курсивом)

4 -> С (класс г будет применяться первым, который сделает ТЕКСТА красный и курсивом, то класс х будет применен, который сделает 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>