Пусть у нас есть абзац, а в нем какой-то текст в теге 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;
}
Результат выполнения кода: