Правило CSS @scope

Определение и использование

CSS @scope Правило позволяет выбирать элементы в определенном поддереве DOM.

С помощью этого @ правила можно точно определить элемент, не пишя слишком конкретный селектор.

Эта @ правило также уменьшает связь между селектором и структурой DOM.

пример

примера 1

Здесь мы используем два независимых @scope Использование блока для соответствия элементов <a> классов .ex1 и .ex2. :scope используется для выбора и установки стиля на саму область. В данном примере областью является элемент <div>, применяющий классы:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

Попробуйте сами

Смотрите следующий HTML:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

Здесь есть вложенные элементы <div>, если мы хотим установить стили для элементов <h2> и <img> в части container/news, то我们必须 написать следующее (не использовать @scope):

Пример 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

Попробуйте сами

Использование @scope Правила, с помощью которых можно точно определить элементы, не нужно писать слишком сложные селекторы, как показано ниже:

Пример 3

Здесь мы устанавливаем .container в качестве корневой области действия правила @scope для элементов <h2> и <img> в компоненте .container:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Попробуйте сами

@scope Правило содержит один или несколько наборов правил и может использоваться двумя способами:

• В качестве независимого блока CSS, в данном случае, он содержит префикс, который включает корень области действия и необязательный селектор ограничения области действия - эти определения определяют верхние и нижние границы области действия.
• В качестве инлайн стиля в элементе <style> HTML, в данном случае, префикс опущен, и содержащий правила набор автоматически применяется к родительскому элементу <style>.

Пример 4

Область действия "甜甜圈" касается только элементов, расположенных между двумя элементами в древовидной структуре предков. Вот пример:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

Попробуйте сами

Грамматика CSS

@scope (Корень области действия) {
  Сета правил
}

или

/* Область действия "甜甜圈" */
@scope (Корень области действия) to (Ограничения области действия) {
  Сета правил
}

Поддержка браузерами

Числа в таблице представляют собой версии браузеров, которые полностью поддерживают это @ правило.