如何在 v-html 中设置标签的子组件样式

Posted 2023-02-22

【中文标题】如何在 v-html 中设置标签的子组件样式

【英文标题】：How to style a child component of a tag inside a v-html

【发布时间】：2020-09-12 10:21:51

【问题描述】：

我正在尝试在 vuejs 中的 v-html 上的 ap 标签内设置 img 标签的样式，我可以直接设置 p 标签的样式，但选择 img 标签有点困难，因为 p ~ img 和 p + img 不会工作有没有办法解决这个问题。 v-html 的内容来自 wp-rest api

v-html 内容

<p><img class="aligncenter" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80" ></p>

SinglePost.vue

<div class="works__content_grid">
  <p class="works__content" v-html="work.post.content.rendered"></p>

</div>

<style lang='sass' scoped>
.works
 &__content
  p
  img
   width: 100px
</style>

【问题讨论】：

不能嵌套段落，即一个段落元素不能有<p>后代。如果可能，为什么不使用后代选择器p img ... ？

@connexo 我尝试将其更改为 div 标签，但仍然无法正常工作

<p> 也不能包含<div>。

检查***.com/a/35254308/3744304

【参考方案1】：

为什么它没有为你的图像设置样式的问题是标签scoped

当使用标签 scoped 时，Vue JS 会为你的组件和样式生成一个哈希值，以使 CSS 作用域。

但是，您生成的内容 v-html="work.post.content.rendered" 在分配哈希的那一刻不存在，因此不应用样式

要解决此问题，您必须 1. 删除scoped 2.在SASS中使用/deep/标签：

<style lang="sass" scoped>
.works
&__content
 /deep/ p,
 /deep/ img
   width: 100px
</style>

我发现有用的文档here

【参考方案2】：

带有一些限制的paragraph is a very special HTML Element：

你不能嵌套p元素 p 元素不能包含很多元素，例如 e.g. div（只允许phrasing content）

当浏览器在您的“外部”p 中找到另一个 p 或 div 时，它的作用如下：

您的 HTML：

<p>foo
   <p>bar</p>
</p>

浏览器将其更正为：

<p>foo</p>
<p>bar</p>

与外部p 中的div 相同。

【参考方案3】：

看看这些样式（如果您已经向我们展示了所有内容，那就是），您似乎错过了_grid“元素”。

尝试以下调整：

.works
  &__content_grid
    p > img
      width: 100px

或者，简单地从样式中去掉 p 标签，因为 works__content 实际上是它自己的类而不是它的子类。

.works
  &__content
    > img
      width: 100px

【讨论】：

试过这仍然行不通，即使将

@carljustineoyales 你能做一个小提琴，以便我们进行测试吗？