将CSS类应用于选择器（在CSS中）

Question

假设我有一个CSS类：

.text-red {
  color: red;
}

此类在其他地方定义，可能是超复杂的，并且不可编辑。

在我的DOM中，我有几段。我想将text-red类应用于所有段落。我当然可以直接写下来：

<p class="text-red">XXX</p>
<p class="text-red">YYY</p>
<p class="text-red">ZZZ</p>
<p class="text-red">WWW</p>

但它太多了。我想在我的CSS文件中写一下：

p {
  .text-red
}

以便所有“p”元素都应用了该类。 显然，这不是CSS有效规则。我该怎么办？

Answer 1

使用@extend可以轻松地使用SASS预处理器完成此操作。

https://sass-lang.com/guide

哦，你也可以使用JavaScript（jQuery）：

$('p').addClass('.text-red')

但也许最简单的方法是将属性复制到p选择器？

Answer 2

这是有效的CSS：

p.text-red { color: red; }

Answer 3

引用您的儿童组合器：

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

例如

.text-red > p {
  ...
}

这将选择.text-red class

的所有p子元素