如何不将CSS样式应用于子元素

Question

例如，我有一个非常简单的HTML代码，我想将样式应用于p元素，而不是应用于span元素。

<p>
  Dont apply style to this <span> child </span>
</p>

为什么我需要那个？在我的实际情况下，如果我已经在 p 上定义了很多样式，那么我真的不想再次定义这些样式，只是为了在孩子的元素样式中覆盖它们。

我尝试使用的是:not()伪类：

p, :not(p span) {
  color: red
}

它似乎不起作用。只是觉得:not()是正确的方法。

问题：如何使用:not()（或其他伪类，选择器）将样式应用于父项而不应用于子项。

已编辑： 使用>运算符似乎无法解决我的示例

Answer 1

据我所知，不可能阻止对子类的CSS继承。但是有一些解决方法可以用来替代父母的样式。一种这样的方式是，您可以使用类似initial的关键字来一次重置所有属性。请查看以下示例：

p {
  font-style: italic;
  color: red;
  font-size: 30px;
}

.initial {
  all: initial;
}

<p>
  Dont apply style to this <span class="initial"> child </span> so on...
</p>