The difference between scope and scoped in CSS

foreword

In the development of css, a large number of new features and proper nouns have emerged.

scope

scopeIt is a pseudo-class selector in CSS, indicating the element where the current rule is located, and it can be used to limit the scope of the element selector. In regular CSS, all selectors are global, ie they apply to any element in the document. But in some cases, we need to limit a selector to a specific element, which can be used at this time :scope.

:scopeA selector that can be used in place of the current element, e.g. div:scopecan be written as :scope, #id:scopecan be written as :scope#id, .class:scopecan be written as :scope.class. In this way, the selector will only act on the child elements inside the current element, rather than all elements in the document.

For example, in the following HTML code, .containercontains two sub-elements, namely h1and p, we can use :scopeto limit containerthe internal style. code show as below:

<div class="container">
  <h1>Hello World</h1>
  <p>这是一段文本</p>
</div>

<style>
  .container {
      
      
    font-size: 16px;
    
    /* 使用 :scope 限定子元素的样式 */
    :scope h1 {
      
      
      font-size: 24px;
    }
    
    :scope p {
      
      
      color: red;
    }
  }
</style>

In the above example, .containerthe style of is applied to its child elements, but the styles of h1and pare limited to .containerinside instead of acting on all h1and pelements in the document.

scoped

scoped is used to use locally scoped CSS styles in components.

With scoped, you can use the same class or tag name in a component and apply it to different elements, but those element styles will not interfere with each other. In other words, the scoped attribute implements locally scoped CSS, ensuring the privacy and independence of style codes.

When you use the scoped attribute, Vue.js will automatically add a unique attribute to each selector at compile time. The value of this attribute will be bound to the elements in the component, thus ensuring the local scope of the style. But it should be noted that scoped is not a panacea, and some complex styles still need to be processed by the global style sheet.

Here's an example of a single-file component using Vue.js that shows how to use scopedthe attribute to achieve style local scope.

<template>
  <div>
    <h1>这是组件标题</h1>
    <p>这是组件内容，Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</template>

<style scoped>
h1 {
      
      
  color: blue;
}

p {
      
      
  margin-top: 10px;
  font-size: 16px;
}

/* 只会作用于当前组件内的 h1 元素，不会影响到全局样式 */
</style>

In the example above, <style>the tag's scopedattribute specifies that the style applies only to the current component and will not affect the global stylesheet. h1The element and pthe element have their own styles, but these styles do not affect other components or global styles.

If you do not add scopedthe attribute, then the style will be compiled into a global style selector, which may have a negative impact on the entire application.

Summarize

scope and scoped are two completely different things. Putting it together, it is generally the masterpiece of the interviewer.