scope

CSS :scope Pseudo Class

The CSS :scope pseudo-class represents elements that are a reference point for selectors.

The :scope is the same as :root since, at the moment, there is not a way to explicitly establish a scoped element.

Scope element is an element forming a context for a block of styles. (Scope元素是构成样式块的上下文的元素。)

Version

Version (版本)

Selectors Level 4 (选择器级别4)

Syntax

Syntax (语法)

:scope {
 css declarations;
}

Example of the :scope selector:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</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>


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部