将 CSS 类应用于选择器（在 CSS 中）[重复]答案

【问题标题】：Apply a CSS class to a selector (in CSS) [duplicate]将 CSS 类应用于选择器（在 CSS 中）[重复]
【发布时间】：2018-02-03 03:39:57
【问题描述】：

假设我有一个 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 有效规则。我该怎么办？

【问题讨论】：

标签： html css

【解决方案1】：

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

另外，你也可以使用 JavaScript (jQuery)：

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

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

【讨论】：

你在 SASS 中的表现如何？我试过： p { @extend .text-red } 但我得到：找不到选择器“.text-red”。显然这个类确实存在，但它来自一个标准的 css 文件，所以我猜 SASS 没有看到它......
你做得很好！我会将原始文件更改为“.scss”，然后使用@import 将其导入

【解决方案2】：

这是有效的 CSS：

p.text-red { color: red; }

【讨论】：

强制将类添加到所有需要的 html 标签中，这与他的问题相反
一点也不矛盾 - OP 声明“我想将文本红色类应用于所有段落：”并再次“所有“p”元素”
纠正我的错误
谢谢 - 请删除你的反对票 ;-)
很公平。在我看来，p { .text-red } 是尝试将.text-red 样式应用于所有<p> 元素，而无需为<p> 元素明确定义这些样式。 OP 似乎希望避免将类添加到每个 <p> 元素，因为它是“冗余的”。当然，我可能是错的。

【解决方案3】：

例子

.text-red > p {
  ...
}

这会选择 .text-red 类的所有 p 个子节点

【讨论】：

所以你的意思是把类放在容器上？似乎与问题无关，但在某些情况下它可能很有用。
需要解释一些反对意见，至少可以学到一些东西
@Qwertiy 他提到他不想在每个 html 元素上指定。这就是采用这种方法的原因
OP 似乎没有将 <p> 元素定位为 .text-red 的子元素。
@AlexMounir，他从 css 预处理器询问诸如 @include 或 @extends 之类的东西。你不回答这个问题。我没有对你的答案投票，但我认为反对票与这个事实有关。