CSS中scope和scoped区别小结(scope method)

前言

在css的发展中，涌现了大量的新的特性和专有名词。

scope

scope 是 CSS 中的一个伪类选择器，表示当前规则所在元素，它可以用于限定元素选择器的范围。在常规的 CSS 中，所有的选择器都是全局的，即它们适用于文档中的任何元素。但在某些情况下，我们需要将某个选择器限定在特定的元素内部，这个时候可以使用 :scope。

:scope 可以用于代替当前元素的选择器，比如 p:scope 可以写成 :scope，#id:scope 可以写成 :scope#id，.class:scope 可以写成 :scope.class。这样，选择器就只会作用于当前元素内部的子元素，而不是文档中的所有元素。

举个例子，在下面的 HTML 代码中，.container 中包含了两个子元素，分别是 h1 和 p，我们可以使用 :scope 来限定 container 内部的样式。代码如下：

CSS中scope和scoped区别小结(scope method) 第1张

<p class="ed87-fd6a-e708-d454 container">
  <h1>Hello World</h1>
  <p>这是一段文本</p>
</p>
<style>
  .container {
    font-size: 16px;
    /* 使用 :scope 限定子元素的样式 */
    :scope h1 {
      font-size: 24px;
    }
    :scope p {
      color: red;
    }
  }
</style>

在上述例子中，.container 的样式应用到了它的子元素上，但 h1 和 p 的样式又被限定在了 .container 内部，而不是作用于文档中的所有 h1 和 p 元素。

scoped

scoped用于在组件中使用局部作用域的 CSS 样式。

使用 scoped，你可以在一个组件中使用相同的类名或标签名，并将其应用于不同的元素，但这些元素样式不会相互干扰。也就是说，scoped 属性实现了局部作用域的 CSS，保证了样式代码的私密性和独立性。

当你使用 scoped 属性时，Vue.js 将在编译时自动为每个选择器添加一个唯一的属性，这个属性的值会和组件中的元素绑定在一起，从而保证了样式的局部作用域。但需要注意的是， scoped 并不是万能的，有些复杂的样式仍需要全局样式表来处理。

以下是一个使用 Vue.js 的单文件组件示例，其中展示了如何使用 scoped 属性实现样式局部作用域。

<template>
  <p>
    <h1>这是组件标题</h1>
    <p>这是组件内容，Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </p>
</template>
<style scoped>
h1 {
  color: blue;
}
p {
  margin-top: 10px;
  font-size: 16px;
}
/* 只会作用于当前组件内的 h1 元素，不会影响到全局样式 */
</style>

在上面的示例中，<style> 标签的 scoped 属性指明样式只作用于当前组件，不会影响到全局的样式表。h1 元素和 p 元素各自定义了样式，但这些样式不会影响到其他组件或全局样式。

如果不加 scoped 属性，那么样式就会被编译成全局的样式选择器，可能会对整个应用程序造成负面影响。