قاعدة @scope CSS

定义和用法

CSS @scope 规则允许您选择特定 DOM 子树中的元素。

通过此 @ 规则，您可以精确地定位元素，而无需编写过于具体的选择器。

此 @ 规则还减少了选择器与 DOM 结构之间的耦合。

实例

例子 1

在这里，我们使用两个独立的 @scope 块来匹配 .ex1 类和 .ex2 类中的 <a> 元素。: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>عنوان معين</h2>
    <img src="example.jpg" alt="صورة معينة">
  </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) إلى (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

تجربة شخصية

جملة CSS

@scope (جذر النطاق) {
  مجموعة القواعد
}

أو

/* نطاق الحلوى */
@scope (جذر النطاق) إلى (تقييد النطاق) {
  مجموعة القواعد
}

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم بشكل كامل @ القاعدة الأولى.