如何将指定CSS类样式单独或组合应用到无关的第三个<p>元素？

需求1：仅将.social .first的样式应用到第三个<p>元素 #

原CSS中.social .first是后代选择器，仅匹配.social容器内的.first元素。要让独立的第三个<p class="first">应用这套样式，可采用以下两种方法：

方法1：扩展CSS选择器范围 #

修改原有选择器，让它同时匹配后代场景和独立场景：

.social .first,
.first {
  color: green;
  font-style: italic;
}

这样无论.first是否嵌套在.social内，都会应用绿色斜体样式。

方法2：给目标元素新增类名（不修改原有选择器） #

如果不想改动原有CSS规则，给第三个<p>添加专属类名，再新增对应样式：

/* 新增CSS规则 */
.standalone-first {
  color: green;
  font-style: italic;
}

对应的HTML修改：

<p class="first standalone-first">chimichangaff</p>

需求2：同时将.social和.social .first的样式应用到第三个<p>元素 #

要让目标元素同时拥有.social的基础样式（红色、粗体、Courier New字体）和.social .first的特殊样式（绿色斜体），可参考以下方案：

方法1：给元素添加多个类名+调整CSS优先级 #

直接给第三个<p>同时添加social和first类：

<p class="social first">chimichangaff</p>

然后新增交集选择器确保样式优先级：

/* 保留原有样式 */
.social {
  color: red;
  font-weight: bold;
  font-family: "Courier New";
}

.second {
  color: blue;
}

.social .first {
  color: green;
  font-style: italic;
}

/* 新增交集选择器，匹配同时拥有social和first类的元素 */
.social.first {
  color: green;
  font-style: italic;
}

此时该元素会继承.social的粗体、字体属性，同时应用.social.first的绿色斜体样式。

方法2：用CSS变量复用样式（更易维护） #

将重复样式抽为CSS变量，避免代码冗余：

:root {
  --social-base-color: red;
  --social-base-weight: bold;
  --social-base-font: "Courier New";
  --social-first-color: green;
  --social-first-style: italic;
}

.social {
  color: var(--social-base-color);
  font-weight: var(--social-base-weight);
  font-family: var(--social-base-font);
}

.second {
  color: blue;
}

.social .first {
  color: var(--social-first-color);
  font-style: var(--social-first-style);
}

/* 组合样式类 */
.social-first-combo {
  color: var(--social-first-color);
  font-style: var(--social-first-style);
  font-weight: var(--social-base-weight);
  font-family: var(--social-base-font);
}

对应的HTML修改：

<p class="first social-first-combo">chimichangaff</p>

内容的提问来源于stack exchange，提问作者Vivek