CSS :scope 伪类

CSS :scope 伪类表示作为选择器参考点的元素。

:scope 与 :root 相同,因为目前还没有一种方法可以明确地建立一个作用域元素。

范围元素是形成样式块上下文的元素。

语法

:scope {
  css declarations;
}

:scope 选择器的例子:

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .container {
        margin: 40px auto;
        max-width: 700px;
        background-color: #eeeeee;
        padding: 20px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
        padding: 30px;
      }
      :scope {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
  </body>
</html>
日期:2020-06-02 22:14:45 来源:oir作者:oir