စျူးရှားဆိုင်ရာ @scope ကိုးကား

အသုံးပြုနည်းဥပဒေ

CSS @scope အခြေခံအကြံပြုအချက်အလက်သည် အခြေခံအသုံးပြုအခြေခံအစားအစားများတွင် အရာများကို စုံစမ်းရန် ခွင့်ပြုသည်။

ဤ @ အခြေခံအကြံပြုအချက်အလက်ကို အသုံးပြုလျှင် အရာများကို တောင်းဆိုသော အခြေခံကဲ့သို့ စုံစမ်းရန် လိုင်းလျှင် ရှိသည်။

ဤ @ အခြေခံအကြံပြုသည် အခြေခံကဲ့သို့ အခြေခံအစားအစားအကြံပြုမှုကို ကျဆင်းသွားသည်။

အကျိုးသမား

အမှတ် 1

ဒါကို ကျွန်ုပ်တို့သည် အသုံးပြုကြသော @scope ပုံစံကိုစုံစမ်းရန် .ex1 နှင့် .ex2 အမျိုးအစားများတွင် <a> အရာများကိုစုံစမ်းသည် :scope သည် အပိုင်းအခြားအုံစမ်းရန်နှင့် စံကိုကျွမ်းကျွမ်းချင်း အုံစမ်းရန်အတွက် အသုံးပြုသည်။ အမှတ်အသားအရ အပိုင်းအခြားအုံစမ်းရန် အခြေခံအဖြစ် အမျိုးအစားများကို အသုံးပြုသည်ကို အသိအမှတ်ပြုရမည်။

@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：


  

    
Some header

    Some image

这里有一些嵌套的

元素，如果我们想为上述 container/news 部分中的

和 元素设置样式，则必须编写以下内容（不使用 @scope）：

例子 2

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

ကိုယ်တိုင် ကြိုးစားကြပါ

使用 @scope 规则，您可以精确地定位元素，而无需编写过于复杂的选择器，如下所示：

例子 3

在这里，我们仅针对 .container 组件中的

和 元素，将 .container 设置为 @scope 规则的根作用域：

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

ကိုယ်တိုင် ကြိုးစားကြပါ

@scope 规则包含一个或多个规则集，可以通过两种方式使用：

  • 作为 CSS 中的独立块，在这种情况下，它包含一个前导部分，其中包括作用域根和可选的作用域限制选择器——这些定义了作用域的上下边界。
  • 作为 HTML 中