CSS @scope రూల్

定义和用法

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

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

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

实例

例子 1

在这里，我们使用两个独立的 @scope 块来匹配 .ex1 类和 .ex2 类中的 元素。: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;
  }
}

మీరే ప్రయత్నించండి

దిగువ హెచ్చరణను చూడండి:

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

ఈక్కడ అంతర్గత డివ్ ఎలిమెంట్లు ఉన్నాయి. మేము పైన పేర్కొన్న container/news భాగంలో ఉన్న <h2> మరియు <img> ఎలిమెంట్లకు శైలీని అందించడానికి ఈ విధంగా రాయాలి (ఇంకా @scope ఉపయోగించకుండా):

ఉదాహరణ 2

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

మీరే ప్రయత్నించండి

ఉపయోగించండి @scope నియమం, మీరు సరికొత్త కఠినమైన ఎంపికలను రాయకూడని చేసి, కేవలం ఈ విధంగా ప్రత్యేకంగా ఎలిమెంట్లను గుర్తించవచ్చు:

ఉదాహరణ 3

ఇక్కడ, మేము మాత్రమే .container కమ్పోనెంట్లో ఉన్న <h2> మరియు <img> ఎలిమెంట్లపై పరిధి నియమం ప్రధాన పరిధిగా .container ని నిర్వచిస్తున్నాము:

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

మీరే ప్రయత్నించండి

@scope నియమం ఒకటి లేదా పలు నియమాల స్టాక్లను కలిగి ఉంటుంది, ఇవి రెండు రీతులలో ఉపయోగించబడవచ్చు:

  • స్వతంత్ర బ్లాక్లో కాస్స్స్ లో, ఈ కేసులో, ముందుగాను పారితోలబడిన భాగం ఉంటుంది, మరియు పరిధి మూలం మరియు ఆప్షనల్ పరిధి పరిమితి ఎలిమెంటర్లు - ఇవి పరిధి పైని మరియు కించిపోయిన పరిధి నిర్వచిస్తాయి.
  • హెచ్ఎంఎల్లో <style> ఎలిమెంట్లోని అంతర్గత శైలీగా, ఈ కేసులో, ముందుగాను పారితోలబడిన భాగం ఉండదు, మరియు అంతర్భాగంలో ఉన్న నియమాల స్టాక్ స్వయంచాలకంగా పరిధి ఎలిమెంట్లపై ప్రభావం చేస్తుంది.

ఉదాహరణ 4

“డ్రింక్ బ్యాగ్ పరిధి” కేవలం పూర్వగామి వృక్షంలో ఉన్న రెండు ఎలిమెంట్ల మధ్య ఉన్న ఎలిమెంట్లకు మాత్రమే వర్తిస్తుంది. ఇది ఉదాహరణ:

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

మీరే ప్రయత్నించండి

CSS సంకేతాలు

@scope (పరిధి మూలం) {
  నియమాల స్టాక్
}

లేదా

/* డ్రింక్ బ్యాగ్ పరిధి */
@scope (పరిధి మూలం) to (పరిధి పరిమితి) {
  నియమాల స్టాక్
}

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ @ నియమం పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి.

Chrome Edge Firefox సఫారీ ఒపెరా
118 118 అనువర్తించబడలేదు 17.4 104