如何将第三方CSS库中表单内textarea的样式应用到其他元素？

好问题！直接给元素设置class=".ui.forms textarea"是行不通的，因为class属性接受的是类名，而不是完整的CSS选择器语法——浏览器会把这个值当成一个包含空格和点的奇怪类名，根本匹配不上原库的样式规则。不过有几种靠谱的方法可以实现你的需求：

• 提取样式创建自定义类（最通用的方案）
  打开浏览器开发者工具（比如Chrome的Elements面板），找到.ui.forms textarea对应的所有CSS规则，把这些规则完整复制出来，然后在你自己的样式文件里创建一个新的类（比如.ui-textarea-style），把复制的样式粘贴进去。之后，不管是表单外的div还是textarea，只要给它们加上这个自定义类，就能用上原库的样式了。
  优点：不需要依赖任何预处理器或JS，兼容性拉满；缺点：如果原库后续更新了这个样式，你需要手动同步自定义类的内容。

• 利用CSS变量（如果原库支持的话）
  检查原库的.ui.forms textarea样式是否使用了CSS变量（比如var(--textarea-padding)这类写法）。如果有的话，你可以直接在目标元素的样式里引用这些变量，比如：

  .my-custom-div {
    padding: var(--textarea-padding);
    border: var(--textarea-border);
    /* 其他原样式用到的变量 */
  }
  

  优点：能和原库样式保持同步，原库更新变量时你的元素样式也会自动更新；缺点：依赖原库是否使用了CSS变量，不是所有第三方库都会这么做。

• 使用CSS预处理器的@extend（适合用Sass/LESS的项目）
  如果你的项目用了Sass或LESS这类预处理器，可以通过@extend语法直接继承原选择器的样式。比如在Sass中：

  .my-custom-element {
    @extend .ui.forms textarea;
  }
  

  注意：如果原库的CSS是外部引入的，你需要先通过@import把它导入到你的预处理器文件中，才能使用@extend继承它的选择器。
  优点：写法简洁，能自动同步原样式；缺点：依赖预处理器，且对外部CSS的导入有要求。

• 用JavaScript动态复制样式（适合临时需求或特殊场景）
  可以通过JS获取原元素的计算样式，然后把这些样式应用到目标元素上：

  // 获取原样式的计算结果
  const originalTextarea = document.querySelector('.ui.forms textarea');
  if (!originalTextarea) return;
  const computedStyle = window.getComputedStyle(originalTextarea);
  
  // 应用到目标元素
  const targetElements = document.querySelectorAll('.my-target-class');
  targetElements.forEach(el => {
    for (const prop of computedStyle) {
      el.style[prop] = computedStyle[prop];
    }
  });
  

  优点：不需要修改样式文件，适合快速测试；缺点：无法复制媒体查询、伪类（比如:hover）这类动态样式，且页面加载后如果原样式变化，需要重新执行脚本。

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