1.2.2 CSS选择器的作用域

以前CSS选择器只有一个全局作用域，也就是在网页中任意位置的CSS都共用一个文档上下文。

如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。例如，对于下面的代码：

<section>
  <style scoped>
   p { color: blue; } 
   :scope { background-color: red; }
  </style>
  <p>在作用域内，背景色应该是红色。</p>
</section>
<p>在作用域外，默认背景色。</p>

理论上，<section>标签里面的<p>元素的背景色应该是红色，但目前没有任何浏览器表现为红色。实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的，这一点将在5.1.3节中进一步展开介绍。

另外，CSS选择器的局部作用域在Shadow DOM中也是有效的。例如，有一个<div>元素：

<div id="hostElement"></div>

然后使用Shadow DOM为这个<div>元素创建一个<p>元素并且控制其背景色的样式，如下：

// 创建Shadow DOM
var shadow = hostElement.attachShadow({mode: 'open'});
// 给Shadow DOM添加文字
shadow.innerHTML = '<p>我是由Shadow DOM创建的 &lt;p&gt; 元素，我的背景色是？</p>';
// 添加CSS，p标签背景色变成黑色
shadow.innerHTML += '<style>p { background-color: #333; color: #fff; }</style>';

结果如图1-1所示，Shadow DOM创建的<p>元素的背景色是黑色，而页面原本的<p>元素的背景色不受任何影响。

图1-1 页面原本的<p>元素的背景色不受任何影响

上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld. cn/selector2/1/2-1.php或扫描下面的二维码体验与学习。