学习日记--css :scope 伪类的用法

        在js中查询dom中的querySelector返回的是第一个查找到的也是单个DOM元素，querySelectorAll返回的是一个数组，NodeList。同时既可以用document.querySelectorAll(),也可以用dom.querySelectorAll();  

<div id="my-div1">
    <div id="outer"></div>
</div>

<div id="my-div2">
    <div id="outer1"></div>
    
    <div id="outer2">
        <div id="inner1"></div>
        <div id="inner2"></div>
    </div>
    
    <div id="outer3"></div>
</div>

       上面的HTML中，如果用document.querySelectorAll("#my-div2 div div")，会得到[div#inner1, div#inner2],这个符合我的理解：“在#my-div2中查找符合div div选择器的条件”。但是如果用document.querySelector("#my-div2").querySelectorAll("div div")呢？经过测试得到了[div#outer1, div#outer2, div#inner1, div#inner2, div#outer3]，这就有点奇怪了。jQuery里面有个函数为find()，用法大概是$("#my-div2").find("div div")，咋一看，和刚才的document.querySelector("#my-div2").querySelectorAll("div div")有点类似。难道这是find()的原生吗？结果不是这样的，用find()也只能得到[div#inner1, div#inner2]。

假设定义document.querySelector("#my-div2") 范围为S：

document.querySelectorAll("#my-div2 div div")或者 jquery中使用find()查找的范围 是<S的，

      (#my-div2往下开始查找，但不包括#my-div2本身)；

document.querySelector("#my-div2").querySelectorAll("div div")查找的范围是 <=S的，

       (从#my-div2开始查找，包括#my-div2本身)。

        如果想让document.querySelector("#my-div2").querySelectorAll("div div")从#my-div2往下开始查找，但不包括#my-div2本身也有办法，就是使用：scope 伪类：

document.querySelector("#my-div2").querySelectorAll(":scope div div")

经过测试，在谷歌和火狐都生效了，IE没有生效，在欧朋和苹果上面还不清楚。