Блог

Предположим, сгенерированный фрагмент HTML и CSS, где CSS не должен применяться за пределами фрагмента.

 <div class="text">I am outside and should not be red.</div>
<div>
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .text {
      color: red;
    }
  </style>
</div>
 

Который производит:

Как можно <style> изменить тег, чтобы он применялся только к содержащему его элементу ( <div> ) и его дочерним элементам? Учтите, что уникальный идентификатор/класс не может быть использован, поэтому это решение в данном случае недопустимо, хотя оно, естественно, приведет к желаемому результату:

 <div class="text">I am outside and should not be red.</div>
<div class="sandbox">
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .sandbox .text {
      color: red;
    }
  </style>
</div>
 

HTML и стиль (и JS) будут введены отдельно, будут завернуты и введены в DOM по желанию. Таким образом, цель состоит в том, чтобы этот введенный фрагмент был «изолирован» от внешнего элемента фрагмента. И я не хочу зависеть от автора, чтобы правильно применять уникальные селекторы ко всем своим классам CSS-вы знаете, потому что люди совершают ошибки. Вместо этого я хочу автоматически ограничить область внутри фрагмента сгенерированным родительским элементом, который его содержит.

Предположим, что «кусок» выглядит так, как показано ниже:

 <div class="text">I am inside and should be red.</div>

<style type="text/css">
  .text {
    color: red;
  }
</style>
 

«Сервер» вернет завернутый кусок, подобный этому (обратите внимание на обертку <div> ).:

 <div>
  <div class="text">I am inside and should be red.</div>

  <style type="text/css">
    .text {
      color: red;
    }
  </style>
</div>
 

Часть, которая отсутствует, — это то, как «охватить» любые <style> элементы внутри фрагмента, чтобы они применялись только к оболочке.

Похоже, что раньше это было возможно с помощью scoped атрибута, но он устарел. Похоже, что я могу заполнить эту функцию, что я и сделаю сейчас, но мне любопытно, есть ли другое решение.

Просто используйте дочерний комбинатор, > :

 div > div.text {
  color: red;
} 

 <div class="text">I am outside and should not be red.</div>
<div>
  <div class="text">I am inside and should be red.</div>
</div> 

Вы могли бы стать еще более конкретными, используя комбинаторы sibling ( ) и child ( > ) вместе:

 div.text div>div.text {
  color: red;
} 

 <div class="text">I am outside and should not be red.</div>
<div>
  <div class="text">I am inside and should be red.</div>
</div>