Наследование CSS свойств

Пусть у нас есть абзац, а в нем какой-то текст в теге i:

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

Давайте покрасим абзацы в красный цвет:

p {
	color: red;
}

В результате покрасится не только текст абзаца, но и текст тега i:

rez This is some text in paragraph.

Все дело в том, что свойство 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;
}

Результат выполнения кода: