Применить css таблицу стилей к указанному c div

Question

Я пытаюсь применить специфицированную c таблицу стилей для div, я не хочу использовать для этого iframe, я пробовал это:

<div id="superdiv">

  <style>
    #superdiv {
      @import url("./css/style.css");
    }
  </style>


//html that apply css here from stylesheet linked before
<h1 class="x"> Hello</h1>

</div>

Answer 1

Если вы хотите стилизовать дочерние элементы заголовка <div>, например, <h1>, независимо от других возможных элементов <h1> вне контейнера, вы можете сделать это только с одним файлом CSS.

CSS предлагает мощный селектор > , который позволяет настроить правило для дочернего элемента.

В вашем случае контейнер <div> имеет идентификатор superdiv , который доступен как:

#superdiv
{
}

Чтобы получить доступ к дочернему элементу - в вашем случае тег <h1> - просто выполните:

#superdiv > h1
{

}

Вот пример:

h1 {
  color: #00ff00;
}

#superdiv {
  background-color: #efefef;
  border: 1px solid #ff0000;
}

#superdiv>h1 {
  color: #0000ff;
}

<h1>Hello</h1>
<div id="superdiv">
  My content
  <h1>Hello</h1>
</div>

Answer 2

вы не создаете конкретную c таблицу стилей внутри div, попробуйте этот метод

<div id="style-sheet-modern"> 
   <div class="my-class"></div>
   <div class="etc"></div>
</div>

#style-sheet-superdiv .my-class{
    color:black;
} 

#style-sheet-modern .etc {
   color:red;
}