如何将导入的CSS类样式应用于无法添加类/ID的默认HTML元素？

你可以通过以下几种方法实现将外部样式表中的类选择器样式应用到无法添加class/id的标准HTML元素上，每种方法各有适用场景：

1. 使用JavaScript动态添加类（最推荐，无需修改样式） #

这是最灵活的方案，直接利用现有类样式，不需要改动任何CSS代码，只要页面允许引入JavaScript即可。通过JS选中目标元素，给它们添加对应的类：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 给所有<p>元素添加.medium-body-text类
  document.querySelectorAll('p').forEach(element => {
    element.classList.add('medium-body-text');
  });
  
  // 如果还有其他元素需要关联，比如<h2>对应另一个类，可以继续添加
  // document.querySelectorAll('h2').forEach(el => el.classList.add('your-heading-class'));
});

优点：完全复用外部样式表的所有类样式，后续外部样式更新时无需同步修改代码；实现简单，对现有页面结构无侵入。
缺点：依赖JavaScript，如果用户禁用JS，样式会失效（不过现在绝大多数场景下JS是启用的）。

2. 使用CSS预处理器的@extend（适合用Sass/LESS的项目） #

如果你使用Sass、LESS等CSS预处理器，可以用@extend指令让元素选择器直接继承类的所有样式，编译后会生成合并后的CSS规则：

// 假设已经导入了外部样式表
@import 'path/to/your-external-stylesheet.css';

// 让<p>元素继承.medium-body-text的所有样式
p {
  @extend .medium-body-text;
}

优点：写法简洁，编译后的CSS是原生兼容的，不依赖JS；样式继承逻辑清晰。
缺点：需要项目支持预处理器编译，无法直接在原生CSS中使用。

3. 原生CSS自定义属性（变量）方案（适合无法用JS和预处理器的场景） #

如果只能用原生CSS，你可以把外部类的样式提取到CSS变量中，然后在元素选择器里引用这些变量。如果外部样式表允许修改，最好直接在类里定义变量；如果不能修改，就在自己的样式表中重新定义：

// 先把.medium-body-text的样式映射到变量（如果外部样式表没定义的话）
.medium-body-text {
  --body-color: #2d3748;
  --body-font-size: 1rem;
  --body-line-height: 1.75;
  --body-font-family: 'Helvetica Neue', sans-serif;
  /* 对应类的所有样式属性 */
  color: var(--body-color);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-family: var(--body-font-family);
}

// 然后在<p>元素中引用这些变量
p {
  color: var(--body-color);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-family: var(--body-font-family);
  /* 其他需要继承的属性 */
}

优点：完全原生CSS支持，不依赖JS或预处理器。
缺点：需要手动提取类的所有样式到变量，后续外部样式表更新时，必须同步更新变量和元素选择器的引用，维护成本较高。

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