Как стилизовать дочерний компонент тега внутри v- html

Question

Я пытаюсь стилизовать тег img внутри тега ap на v- html in vuejs, я могу стилизовать тег p напрямую, но выбрать тег img немного сложно, потому что p ~ img и p + img не будет работать, есть ли способ обойти это. Содержимое v- html поступает из wp-rest api

v- html content

<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

A абзац - это особый HTML элемент , который имеет некоторые ограничения:

• вы не можете вкладывать p элементы
• p элементы не могут содержать много элементов, например, div (допускается только фразовое содержание )

Когда браузер, во "внешнем" p находит другой p или div, вот что он делает:

Ваш HTML:

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

Что браузер исправляет на:

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

То же самое с a div внутри вашего внешнего p.

Answer 2

Проблема, почему он не стилизует ваше изображение, заключается в теге scoped

При использовании тега scoped Vue JS будет генерировать ha sh для вашего компонента и стили, чтобы сделать CSS scoped.

Однако созданный вами контент v-html="work.post.content.rendered" отсутствует в момент назначения хэшей, поэтому стили не применяются

Чтобы решить эту проблему, вам нужно либо
1. Удалите scoped
2. Используйте тег / deep / в SASS:

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

Я считаю полезным do c здесь

Answer 3

Глядя на эти стили (если вы нам все показали), вы, кажется, упускаете _grid «элемент».

Попробуйте следующую настройку:

.works
  &__content_grid
    p > img
      width: 100px

Или просто избавьтесь от тега p из стиля, поскольку works__content на самом деле является его собственным классом, а не его дочерними.

.works
  &__content
    > img
      width: 100px