Предотвратить наследуемость цвета фона родителя для дочернего элемента

У меня есть такая структура html:

<p>
    p text
    <span>span text</span>
    <strong>strong text</strong>
    p text
</p>

Мне необходимо задать цвет фона для тега <p> таким образом, что бы этот цвет фона не затронул цвет фона дочерних тегов <span> и <strong>. Т.е. цвет фона тегов <span> и <strong> должен остаться прежним.

Это было бы очень просто сделать, если бы p text внутри тега <p> был бы обернут в какой-нибудь тег. Но сделать это нужно с текущей структурой. Я перепробовал немало методов, используя :not(), :is() и т.д. Так же, "игрался" с правилами revert, unset и intrial. Пробовал display: contents. Тоже толку нет.

Javascript использовать нельзя. Так же, нельзя использовать атрибуты стилей style для тегов и назначать классы. Конечно же, я знаю, что это проблему еще можно решить с помощью переменных CSS - :root. Но это тоже использовать нельзя. Потому, что у родителя тега <p>, в данном случае это тег тела, и он разбит на разные блоки с разными цветами фона.

Может кто ни будь знает секрет решения данной проблемы? Надеюсь на вашу помощь.

Вот воспроизводимый пример:

body {
    background: yellowgreen;
}

p {
    background: yellow;
}

p *:is(span, strong) {
    background: transparent;
}

<p>
    p text
    <span>span text</span>
    <strong>strong text</strong>
    p text
</p>