前言

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

scope

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

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

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

<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>

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

scoped

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

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

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

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

<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>

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

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

总结

scope和scoped是两个完全不一样的东西。放一起说，一般是面试官的杰作。

CSS中scope和scoped区别相关推荐

webpack如何设置html中img路径和css中背景图片路径区别开
在使用webpack过程中,打包后发现html中img路径是: <img src="img/01.jpg" alt="标题图片" /> 但是在mai ...
CSS中fixed和absolute区别
fixed:固定定位 absolute:绝对定位区别: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动
css中100%与100vh区别
100% 即以当前父视图为基准拉伸; 100vh 即以当前屏幕为基准拉伸; 个人在基类中设置父视图高度和含有滚动条的视图高度会优先使用vh 以上便是此次分享的全部内容,希望能对大家有所帮助!
css中井号，点，星号的区别和应用实例。
在css文件中,经常会看到#号.*号和".点",对于没有一点css阅读.开发经验的朋友来讲,这几个符号所代表的意思是什么.有什么作用,肯定是一点都不知道,那么今天我们就一起来认识一 ...
css中单位px和em,rem的区别
1.PX 相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. ...
彻底弄懂css中单位px和em,rem的区别
2019独角兽企业重金招聘Python工程师标准>>> rem: rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem ...
外部引用CSS中 link与@import的区别
这两天刚写完XHTML加载CSS的几种方式,其中外部引用CSS分为两种方式link和@import. 本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 差别1:老祖宗的差别.link ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...

CSS中scope和scoped区别

前言

scope

scoped

总结

CSS中scope和scoped区别相关推荐

最新文章

热门文章