Sass 提供了嵌套的书写方式，用以简化选择器的书写，同时也带来了“作用域”。...嵌套 选择器嵌套 在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...元素只要满足群组中任何一个选择器，都会使用群组对应的样式进行渲染，如 a, span, label { color: grey; } 在 Sass 中，我们可以使用嵌套的形式来简写群组。...Sass 引入了嵌套，出现了嵌套层级，自然也就有了“层级作用域”。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。
根据 ES5 规范，如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话，+ 将进行拼接操作。...首先要了解作用域链，当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止,，而作用域链...，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。...----问题知识点分割线---- let、const、var的区别（1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。...（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
（可以是ID选择器、元素选择器或是类名选择器）组合在一起，两个选择器之间以逗号”,”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的...注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。...2. parent>child选择器 parent>child选择器中的parent代表父元素，child代表子元素，用于在给定的父元素下匹配所有的子元素，使用该选择器只能选择父元素的直接子元素...子元素过滤器 子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定 :first-child 说明：...匹配ul元素中的最后一个子元素li :only-child 说明：如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，
分享 Vue3样式 ，该如何玩~ ---- 作用域样式 style 全局选择器 在 Vue2 组件中，设置一个全局样式，我们通常是新建一个 标签，如： .../* ... */ .red { color: red; } 而在 Vue3 中，可以在作用域样式中使用 :global 这个伪类： /* .red 选择器将作用于全局 */ :global(.red) { color: red; } 插槽选择器 默认情况下，作用域样式不会影响到 ... 效果如下： 这个功能平时用的少，但在封装组件时非常有用，可以让你少写不少代码。 运行只需要在模块作用域执行一次的副作用，或是创建单例对象。... // 在模块作用域下执行 (仅一次) runSideEffectOnce() // 在 setup() 作用域中执行 (每次组件实例被创建的时候都会执行
我们可以给他一个唯一识别的id，就像你入学时学校分配给你的学号，或者你的身份证号，这些是唯一的，只属于你的号码。所以找到某个元素，可以使用id选择器。...{color:blue;} 请记住，id选择器是唯一能准确地找到某个元素的办法。...其实html就是这么干的，每一类元素都有自己的标签，就是元素名或者标签名，如果你想操作的这一类元素不是已经拥有某个标签名的元素，你也可以为他们专门定义一个类名。这就是我们的元素选择器和类选择器。...，子元素是E E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 [注意]n可以是整数(从1开始)，...:first-child 示例：p:first-child 作用：选择属于父元素的第一个子元素的每个 元素。
1、nth-child和nth-last-child 1）E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。...也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。...2）E:nth-last-child(n) 选择器和前面的“E:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算...当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。...“E:first-child”选择器作用类似，不同的是“E:last-child”选择器选择的是元素的最后一个子元素。
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...& (Referencing Parent Selectors: &) 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。...混合指令 (Mixin Directives) 9.1 不带参数的简单Mixin 混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。...这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。
” 由于我们的配置，当遇到兼容性代码，出口文件会自动配置，如下图 2.1 语法嵌套规则 2.1.1 选择器嵌套 避免了重复输入父选择器，复杂的 CSS 结构更易于管理 2.1.2...父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...2.3.3 变量的作用域 2.3.3.1 局部变量 定义：在选择器内容定义的变量，只能在选择器范围内使用 2.3.3.2 全局变量 定义后能全局使用的变量 1、在选择器外面的最前面定义的变量...某个 选择器使其跳出嵌套 2.16.2.2 作用 某些 选择器使其跳出嵌套 2.16.3 使用 @at-root 结合 #{&} 实现BEM效果 需要实现下面的效果...表示在当前作用域生成的 CSS 规则将不包含指定的选择器。
3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。...7.CSS3 结构性伪类选择器—last-child :last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。...8.CSS3 结构性伪类选择器—nth-child(n) :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。...也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。 3. 理解子元素和父元素的关系 下面六个选择器，都是从父元素中选择子元素。...因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的”委托处理”，也就是子元素”委托”父元素处理这个事件。 ...选择作用域链最短的方法 严格地说，这一条原则对所有Javascript编程都适用，而不仅仅针对jQuery。 我们知道，Javascript的变量采用链式作用域。...读取变量的时候，先在当前作用域寻找该变量，如果找不到，就前往上一层的作用域寻找该变量。这样的设计，使得读取局部变量比读取全局变量快得多。...，不用前往上一层作用域，所以要比第一段代码快五六倍。
16、原型链 （内容太多，请自行 Google） 17、函数表达式和函数声明的区别 函数表达式只有函数定义的提升，函数声明则可以将函数定义和声明同时提升；函数表达式可以放在任何地方，函数声明则只能放到全局环境中...父函数定义的变量在子函数的作用域链中，子函数没有被销毁，其作用域链中所有变量和函数就会被维护，不会被销毁。...20、JS 作用域链 在一些类 C 的语言中有“块级作用域”，即花括号的每一段代码都有自己的独立作用域，而 JS 只有函数级作用域；JS 作用域链的第一个对象始终是当前执行代码所在环境的变量对象（VO）...，声明函数在全局作用域，此时作用域链只有一个环境对象；运行函数时作用域链顶端加入了函数内的环境对象，运行完毕时顶端环境对象被销毁，以此类推。...25、JS 垃圾回收机制 标记清除：跟踪环境对象，即跟踪作用域链，GC 会把那些没有作用域影响的内存清除掉； 引用计数：即跟踪记录每个值被引用的次数，但可能会有“循环引用”的问题； 26、Ajax 流程
所有的类名和动画名称默认都有各自的作用域的 CSS 文件。...CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间） 本文来介绍一下 CSS...return loaders; }; 我们就基于这个环境当做示例进行演示 局部作用域 之前的样式 首先，我们将 App.css 修改成 App.module.css，然后导入 css，并设置（这里有个小知识点...： decl：指的是每条具体的 css 规则 rule：作用于某个选择器上的 css 规则集合 不同的类型进行不同的遍历 walk: 遍历所有节点信息，无论是 atRule、rule、comment 的父类型...，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）。
global ，局部变量作用域为全局变量 */ $color:red; #div1{ color: $color; //使用全局变量，结果 red // $color:orange...global 后，局部变量 变成全局变量，div2的值为 orange .box{ background-color: $color; //在本作用域下颜色是 orange...作用域 采用就近原则，在大括号里有已经创建的变量，优先使用大括号里面的变量值。...Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。...作用就是 将需要用的样式编写到一个文件中，其他需要本样式的直接引入，例如清除默认样式 图片
;color: lime;} 5、后代选择器（E F） 后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代...7、相邻兄弟选择器（E+F） 相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择...CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有...n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。"...11):empty选择的元素里面没有任何内容。
目前这四位目前都得到了大多数浏览器的广泛支持，同时非常实用，务必掌握哦~ 否定伪类 :not() :not() 伪类用于否定选择器，可以接受一个或多个选择器作为参数，如果元素不匹配参数中的任何一个选择器...用法 :is() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。...在 CSS 中使用选择器列表时，如果任何选择器无效，则整个列表被视为无效，即如果某个选择器无法解析，则被视为无效，不正确或不受支持的选择器将被忽略，其他选择器将被使用。...如果浏览器能够支持，其功能会非常强大，因为它可以实现类似“父选择器”和“前面兄弟选择器”的功能（提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法），对CSS 的开发会有颠覆性的影响。...例如： a:has(> svg) [} 表示匹配包含有元素的元素，实现的就是“父选择器”的效果，即根据子元素选择父元素。
所有的类名和动画名称默认都有各自的作用域的 CSS 文件。...CSS Modules 并不是 CSS 官方的标准，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间） 本文来介绍一下 CSS...return loaders; }; 我们就基于这个环境当做示例进行演示 局部作用域 之前的样式 ?...： decl：指的是每条具体的 css 规则 rule：作用于某个选择器上的 css 规则集合 不同的类型进行不同的遍历 walk: 遍历所有节点信息，无论是 atRule、rule、comment 的父类型...，也不是浏览器的特性，而是使用一些构建工具，比如 webpack，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）。
目录 一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...如： body *:not(h3) :only-child 选择器 :only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child...:nth-child(n)和:nth-last-child(n)选择器 使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第...:nth-of-type(n)和:nth-last-of-type(n)选择器 在上一节介绍了:nth-child(n)和:nth-last-child(n)选择器，并实现了一些简单的页面效果，本节将引入...比如：用:only-child选择器来修饰的嵌套元素，看是否起作用。 <!
绑定事件监听该函数：addEventListener（事件名称、函数、否使用捕获类型），这里事件名称不加on 对作用域和作用域链的理解 作用域的概念 限制某个变量只能在某个区域内有效，分为全局作用域和局部作用域...作用域的分类 全局作用域：代码中任何地方都能访问到的变量 局部作用域：函数内可访问的变量 ES6中的块级作用域：通过let或const声明，所声明的变量在指定块中被访问 作用域链的概念 作用域链：变量取值是在创建这个变量的函数的作用域中取值...var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为underfined。let和const不存在变量提升。...var不存在块级作用域，let和const存在块级作用域。 谈谈对闭包的认识 闭包的概念 一个函数访问了此函数的父级及父级以上的作用域中的变量，这个函数就是闭包。...对事件代理(事件委托)的理解 js的事件流 冒泡：当子元素触发某个事件之后，该事件依次向上触发父元素的同类事件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
