在 v-html 指令中执行 styles

Question

无论我尝试什么，它都行不通，这里是：

<div class="text text-center">
   <p class="cosmic-links" v-html="infoText"></p>
</div>

这是它在 cosmicjs 中的样子

<p>Some info</p>
<p>Some links to visit <a href="www.google.com" rel="noopener noreferrer" target="_blank">FAQ</a></p>

我正在尝试什么：

.cosmic-links >>> a{
   color:red;
}

Answer 1

根据 vue-loader doc( source )：

某些预处理器，例如 Sass，可能无法正确解析 >>>。 在这些情况下，您可以改用 /deep/ 或::v-deep 组合器 - 两者都是 >>> 的别名，并且工作方式完全相同。

使用预处理器 Sass /deep/ 或::v-deep 应该可以工作：

.cosmic-links /deep/ a {
  color: red;
}

快速沙盒