Regla CSS @scope

definición y uso

CSS @scope La regla permite seleccionar elementos dentro de un subárbol DOM específico.

A través de esta regla @, puede localizar elementos de manera precisa sin escribir selectores demasiado específicos.

Esta regla @ también reduce la耦合 entre el selector y la estructura del DOM.

instancia

ejemplo 1

Aquí, utilizamos dos independientes @scope El bloque se utiliza para coincidir los elementos <a> de los clases .ex1 y .ex2. :scope se utiliza para seleccionar y establecer la estilo del ámbito en sí mismo. En este ejemplo, el ámbito raíz es el elemento <div> que aplica la clase:

@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;
  }
}

Prueba por ti mismo

Ver el siguiente HTML:

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

Aquí hay algunos elementos <div> anidados. Si queremos aplicar estilos a los elementos <h2> y <img> en la parte container/news anterior, debemos escribir lo siguiente (sin usar @scope):

Ejemplo 2

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

Prueba por ti mismo

Usa @scope Las reglas, permitiéndote localizar elementos de manera precisa sin escribir selectores demasiado complejos, como se muestra a continuación:

Ejemplo 3

Aquí, solo estamos aplicando .container como el ámbito raíz de la regla @scope para los elementos <h2> y <img> dentro del componente .container:

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

Prueba por ti mismo

@scope Las reglas contienen una o más conjuntos de reglas y se pueden usar de dos formas:

• Como bloque independiente de CSS, en este caso, contiene una parte inicial que incluye la raíz de ámbito y el selector de límites de ámbito opcional - estos definen los límites superior e inferior del ámbito.
• Como estilo en línea dentro del elemento <style> de HTML, en este caso, se omite la parte inicial y el conjunto de reglas contenido se aplica automáticamente al elemento padre del <style>.

Ejemplo 4

El "ámbito de la dona dulce" solo se aplica a los elementos que se encuentran entre dos elementos en el árbol de ancestros. Este es un ejemplo:

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

Prueba por ti mismo

Sintaxis de CSS

@scope (Raíz de ámbito) {
  Conjunto de reglas
}

o

/* Ámbito de la dona dulce */
@scope (Raíz de ámbito) to (Límites de ámbito) {
  Conjunto de reglas
}

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la regla @.