你有了解过原生css的scope?

最近再看公司项目源码中发现:scope被用来选择元素很常见,于是就去了解了一下关于原生css的作用于问题。mdn介绍

从mdn中我们可以了解到:scope可以在css和js中进行使用,下面我们来介绍一下他的详细用法。

:scope直接在style标签中使用

:scope直接在style标签中使用他将作用于html元素。不管style标签在哪里编写。

html 复制代码
<div class="div1">
  <style>
    :scope {
      border: 1px solid green;
    }
  </style>
  div1
  <div>
    <span>内部</span>
  </div>
  <span>直接</span>
</div>
<div class="div2">
  div2
</div>

:scope配合@scope, scoped使用

按道理讲scoped等价于@scope不加任何修饰,都表示作用于当前style标签的父元素之内的元素。并且可以使用:scope伪类选择父元素。但是现在浏览器不支持style标签中的scoped属性了,所以即使在style中写了scoped也是作用于全局。

@scope完整语法@scope (scope root) to (scope limit) 作用范围不包含limit内的元素。

当我们不指定root, limit时,他将作用于style标签的直接父元素。并且我们使用:scope伪类就可以选择当前@scope作用的根节点。在@scope中编写的css只会作用于当前:scope匹配的根节点内。

html 复制代码
<div class="div1">
  <style>
    /* 如果不设置作用范围,那么它将以style标签的父元素作为作用域 */
    @scope {
      /* 选中根,给根设置样式 */
      :scope {
        border: 1px solid green;
      }
      /* 作用于根内部 */
      span {
        background: red;
      }
    }
  </style>
  div1
  <div>
    <span>内部</span>
  </div>
  <span>直接</span>
</div>
<div class="div2">
  div2
</div>

其实上面的内容等价于这个,但是由于scoped不被支持了,所以就不生效了对于现代浏览器来说。

html 复制代码
<style scoped> 
  /* 作用域当前父元素。但是浏览器不支持了。所以也是作用于全局 */
  :scope {
    background: red;
  }
  /* 作用于根内部 */
  span {
    background: red;
  }
</style>

这里可以查看@scope, scoped被支持情况

如果将上面的style标签中的内容放在head内部,将不会起任何作用。因为当前head中没有被匹配到对应的选择器。除非设置root, limit内容。

下面我们来看看@scope中设置root, limit的效果。只要加上@scope语法的范围,style不管在哪编写,其中的css都会作用于当前范围内的元素。

html 复制代码
 <div>
    <p>
      p标签
      <b>
        <style>
          @scope (div) to (b) {
            :scope {
              background: red;
            }
      
            span, p {
              color: yellow;
            }
      
            /* 这个b设置无效,因为 @scope 范围不包括 b  */
            b {
              color: blue;
            }
          }
        </style>
        span标签
      </b>
    </p>
  </div>
  <div class="div1">
    div1
    <div>
      <span>内部</span>
    </div>
    <span>直接</span>
  </div>
  <div class="div2">
    div2
  </div>

我们还可以使用&代替:scope:scope表示匹配的范围根,而&表示用于匹配范围根的选择器。因此,可以&多次链接。但是,您只能使用:scope一次。

html 复制代码
  <div>
    <p>
      p标签
      <b>
        <style>
          @scope (div) to (b) {
            /* 但是:scope :scope是不被允许的 */
            & & {
              background: red;
            }
      
            span, p {
              color: yellow;
            }
      
            
            b {
              color: blue;
            }
          }
        </style>
        span标签
      </b>
    </p>
  </div>
  <div class="div1">
    div1
    <div>
      <span>内部</span>
    </div>
    <span>直接</span>
  </div>
  <div class="div2">
    div2
  </div>

:scope在js中使用

当在 DOM API 调用(例如 querySelector()、querySelectorAll()、matches() 或 Element.closest())中使用时,:scope 匹配调用此类方法的元素。所以我们就很容易的选中当前元素的直接子元素。

js 复制代码
  const div1 = document.querySelector(".div1")
  const span = div1.querySelectorAll(":scope > span") // [span]
  const _div1 = div1.querySelector(":scope") // null
  // 虽然_div1为null,但是 div1.querySelectorAll(":scope > span")就是可以选择内容的
  const spanAll = div1.querySelectorAll(":scope span") // [span, span]
  const _document = document.querySelectorAll(":scope") // [html]
  const spanEmpty = document.querySelectorAll(":scope > span") // []
  console.log(_div1, span, spanAll, _document, spanEmpty)

参考文章

往期年度总结

往期文章

专栏文章

结语

本篇文章到此就结束了,欢迎在评论区交流。

🔥如果此文对你有帮助的话,欢迎💗关注 、👍点赞 、⭐收藏✍️评论, 支持一下博主~

相关推荐
夏河始溢几秒前
一七八、Node.js PM2使用介绍
前端·javascript·node.js·pm2
记忆深处的声音1 分钟前
vue2 + Element-ui 二次封装 Table 组件,打造通用业务表格
前端·vue.js·代码规范
陈随易2 分钟前
兔小巢收费引发的论坛调研Node和Deno有感
前端·后端·程序员
木小同6 分钟前
JAVA基础之NIO
面试·java基础·nio
熊的猫16 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn23 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
李老头探索1 小时前
Java面试之Java中实现多线程有几种方法
java·开发语言·面试
web Rookie2 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript