CSS @scope กฎ

定義和用法

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>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 องค์ประกอบของ <h2> และ <img> องค์ประกอบ ที่จะตั้ง .container ให้เป็นโซนขอบเขตที่เป็นกฎ @scope:

@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 (จำกัดขอบเขต) {
  ชุดกฎ
}

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางนี้แสดงความสามารถในการสนับสนุน @ กฎที่มีการสนับสนุนครั้งแรกโดยเฉพาะตัวแบบรีดเดอร์