你有了解过原生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)

参考文章

往期年度总结

往期文章

专栏文章

结语

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

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

相关推荐
mubeibeinv6 分钟前
列表代码思路
前端
过期的H2O27 分钟前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6
White graces15 分钟前
Spring MVC练习(前后端分离开发实例)
java·开发语言·前端·后端·spring·java-ee·mvc
2401_8827264818 分钟前
web组态可视化编辑器
前端·物联网·前端框架·编辑器·web·iot
努力学习的木子23 分钟前
跨域问题?同源策略大全
前端
○陈27 分钟前
vue2面试题10|[2024-11-24]
前端·javascript·vue.js
米奇妙妙wuu28 分钟前
react实现模拟chatGPT问答页
前端·react.js·chatgpt·前端框架
在荒野的梦想31 分钟前
Vue-TreeSelect组件最下级隐藏No sub-options
前端·javascript·vue.js
田本初2 小时前
浏览器缓存与协商缓存
前端·javascript·缓存
类人_猿3 小时前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器