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

Question

我正在尝试在 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" alt="turned on gray laptop computer"></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>

Answer 1

段落是一个非常特殊的 HTML 元素，它带有一些限制：

• 你不能嵌套p元素
• p元素不能包含很多元素，例如div （只允许分词内容）

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

您的 HTML：

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

浏览器将其更正为：

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

与外部p内的div相同。

Answer 2

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

当使用标签scoped时，Vue JS 将为您的组件和样式生成 hash，以使 CSS 作用域。

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

要解决这个问题，你必须要么
1. scoped
2. 在 SASS 中使用 /deep/ 标签：

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

我在这里找到有用的文档

Answer 3

看着那些 styles （如果你已经向我们展示了一切，那就是），你似乎错过了_grid “元素”。

尝试以下调整：

.works
  &__content_grid
    p > img
      width: 100px

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

.works
  &__content
    > img
      width: 100px

Answer 4

您应该在 img 标签之前添加>>> 。

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