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

我试图在vuejs中的v-html上的p标记内设置img标记的样式，我可以直接设置p标记的样式，但是选择img标记有点困难，因为

p~img

和

p+img

都不起作用。有办法解决这个问题。v-html的内容来自wp-restapi

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>

作品
&__内容
P
img
宽度：100px

查看这些样式（如果您已经向我们展示了所有内容），您似乎错过了

\u网格

“元素”

尝试以下调整：

.works
  &__content_grid
    p > img
      width: 100px

或者，简单地从样式中去掉

p

标记，因为

works\u内容实际上是它自己的类，而不是它的子类

.works
&__内容
>img
宽度：100px
一个有一些限制的程序：


不能嵌套
p
元素
p
元素不能包含很多元素，例如
div
（仅允许）

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

您的HTML：

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

foo
酒吧



浏览器将其更正为：

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

foo

酒吧


与外部
p
内部的
div
相同，它没有设置图像样式的问题是标记
范围

当使用标记
作用域时
Vue JS将为组件和样式生成一个哈希值，以使CSS作用域化

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

要解决这个问题，您必须
1.删除范围限定的


2.在SASS中使用/deep/tag：

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


作品
&__内容
/深度/p，
/深度/img
宽度：100px

我发现有用的doc
不能嵌套段落，也就是说，段落元素不能有
子体。如果可能的话，为什么不使用后代选择器
p img{…}
？@connexo我尝试将其更改为div标记，但仍然无效
也不能包含
。检查尝试此项仍然无效，即使将
更改为，也不会更改width@carljustineoyales你能做一把小提琴让我们测试一下吗？
<style lang="sass" scoped>
.works
&__content
 /deep/ p,
 /deep/ img
   width: 100px
</style>