Определение итогового цвета текста с учётом CSS‑правил

Условие

Необходимо выяснить, какого оттенка будет отображаться текст, учитывая применённые к нему стили CSS.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="parent">
    <p class="child">
      Text
    </p>
  </div>

  <style>
    div {
      color: red;
    }

    .child {
      color: green;
    }

    .child:first-child {
      color: salmon;
    }

    .parent p {
      color: gold;
    }

    .parent {
      color: blue;
    }

    .parent * {
      color: cyan;
    }
  </style>

  <script src="script.js"></script>

</body>

</html>

Ответ

По показанным inline-правилам цвет будет salmon: .child:first-child имеет специфичность (0,2,0), выше остальных подходящих селекторов. Но неизвестный style.css может изменить итог.

p является первым дочерним элементом parent, поэтому :first-child подходит; пробелы и переводы строк в HTML этому не мешают. .parent p имеет вес (0,1,1), .parent * и .child — (0,1,0). Позднее расположение cyan не перекрывает более специфичное правило.

Цвет parent blue не наследуется вместо явно заданного цвета child. Итоговый ответ условный: внешний style.css и script.js в задании не раскрыты и могут содержать !important, дополнительные правила или менять DOM. Без них гарантируется результат именно приведённой таблицы стилей.