按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： //首先选取页面中id为container...原因就在于反斜杠在字符串中本身就表示转义的意思，它于冒号结合转不出东西来，于是抛错。...比如我们要选择类名里面含反斜杠的元素。是的，我们需要一共使用四个反斜杠！才能正常工作。 ?
问题: 当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需要添加scoped, 但是当我们添加了scoped后, 第三方样式的class后也会被加上...解决: 使用深度选择器 >>> : .a >>> .b { /* ... */ } 上面这么写将会编译成: .a[data-v-f3f3eg9] .b {.../* ... */ } **注意: ** 如果使用CSS预处理器, 会无法编译 >>>, 我们可以使用/deep/ 或者 ::v-deep 来代替 但/deep/在dart-sass中使用会报错
2016年2月2日，微软的项目经理 Kenneth Auchenberg 说如果 CSS 支持了变量和嵌套，他将不再使用预处理器。...2016年12月8日，《CSS揭秘》的作者 Lea Verou 调研了使用 CSS 预处理器的首要原因（单选题），有 1838 个人参与了投票，最终并列第一的两个理由是嵌套和变量。...那个时候，CSS 工作组也讨论过嵌套的问题，但并未通过社区的同意（见会议纪要）。 针对 Jonathan Neal 这次的提议，CSS 工作组的讨论流程如下： ? 图1....开发人员已经习惯了预处理器中的嵌套，嵌套选择器不应该有特殊的优先级 局部样式是有用的，但scope能否真正满足开发人员的需求还不明朗 嵌套和scope是两个维度的特性，建议先实现已经比较成熟的嵌套 3....前瞻符，诸如： # ID 选择器 . 类选择器 [] 属性选择器 * 通用选择器 : 伪类 :: 伪元素 ? 图2.
嵌套 选择器嵌套 在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。...父选择器 & 在 CSS 中，基本选择器分为以下几种： ID 选择器，如 #id 类选择器，如 .class 标签选择器，如 div、p 属性选择器，如 [lang='en'] 伪类选择器，如 a:hover...而其它选择器也可以复合使用，如 div#id、div.class、div[lang='en'] 等。 Sass 为了在嵌套中更好地表达这些复合关系，提供了父选择器 &。...要注意的是，在复合选择器中，& 只能放在开头使用。 群组选择器 在 CSS 中，可以用逗号分隔多个选择器，形成一个群组。...变量作用域 在 Sass 中，变量只能在它被声明的层级和子层级访问；如果一个变量在不同层级中被重复定义，在使用时会从下到上寻找最近的定义。这与 JS 中的函数作用域相似。
等等 多说一嘴： 不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。...类名和类名之间用空格隔开 多类名选择器可以让我们解决更复杂的一些需求 id选择器 id选择器的使用方式和类选择器基本一致 声明id #自定义id名字 {属性1:值1;属性2:值2;} 调用id 给对应的元素添加属性...id="自定义id" #box { font-size:12px; } 内容 特点：id选择器一般配合后期的JS使用较多，效果和类选择器一样，只不过是类选择器可以被多个元素调用...，但是id选择器只能被一个元素调用 在同一个页面中吗，不能出现两个id值相同的元素 通配符选择器 * { 属性1: 值1; 属性2：值2; } 特点：选中任何元素，后期用于页面初始化。...a:active 鼠标按下的状态 伪类选择器在实际工作中，不会写这么多，意义不大，推荐简写的方式完成 a {} a:hover {} 文字的对齐 缩进 下划线 水平对齐 text-align:值;
而 less 的 Mixins 允许你在某个选择器内，直接使用其他选择器内的属性样式，所以中文翻译才有混合，或混入之说，其实也就是将其他的属性样式混合到当前选择器中。...#ff22ff; } .mian { .class1; //直接使用其他选择器定义的属性样式 .class2(#f2f); //使用模板样式，传入参数 #id1; //使用模板样式，不传参时...也可以在基本选择器后面加上 () 括号，这样一来，这个就会被当做模板处理，作用类似于函数，可接收参数，使用时就类似于调用函数那么使用，如果不传参，调用时也可以将括号省略。...另外，有的文章中，对 Mixins 的解释是说，在 class 中使用 class，但上面的例子中也测试了，class 中也是可以使用其他 id 选择器的属性样式的，所以应该不仅限于 class 类选择器...作用域 作用域很好理解，就是类似 JavaScript 中的变量作用域，因为在 less 中都是通过 @变量名: 来定义变量的，后定义的会覆盖掉前定义的，但当在不同嵌套层次中定义同一变量时，就存在局部变量和外部变量之分
各个库比如Boostrap、Vue.js均有 CDN 链接 (5) 使用DNS prefech 使浏览器试图在用户访问链接之前解析域名,在head中添加对应属性即可，如下 (6) 多域名部署，动静分离...JS 优化 (1) 局部变量 定义时若变量是一个对象，循环时需要频繁使用其一个属性，可再定义一个局部变量存储 (2) passive 事件修饰符 流水线的执行方式，后面的工作必须等待前面工作执行完成才能处理...内核线程负责的工作太多且耗时，一旦遇上内核在执行耗时较长的工作，用户的输入事件将无法立即得到响应。...写法注意点： id选择器肯定是最快，但是不要在ID选择器使用的同时再使用标签或类选择器了 不要使用类选择器时用标签选择器 特别是for循环中js编写html代码时直接定义样式类名到所需要作用的元素，之后尽量用一个选择器写样式...，可以大幅提高渲染效率 如果明确dom结构，优先使用子选择器，减少后代选择器使用 使用类选择器替代后代选择器和子选择器 避免使用通配符选择器（*）和属性选择器 (2) 谨慎使用 CSS3 特性 CSS3
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。...类选择器： 类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”...ID选择器 ID选择器与类选择器大致相同，不同的是： ID选择起标签内部指定ID； ID选择器前面不用点”.”，而用井号”#” ID选择器只能起一个ID名；类选择器可以起多个类名。...类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用 ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。...坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。...类名建议使用破折号代替驼峰法。如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。...ID 选择器 在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。...JavaScript 钩子 避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况：轻则浪费时间在对照查找每个要改变的类，重则因为害怕破坏功能而不敢作出更改。...对于仅用在当前文件的变量，可以在变量名之前添加下划线前缀（例如 _my-variable）。
$(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的,但可以添加selector.js...模块来添加10个(是的,我查了)常用的伪类选择器; $()选择器有五种用法: $(选择器,[可选的上下文环境,默认document]) $("#id");/*document.getElementById...方法接收两个参数，上下文，选择器； $()方法中如果不传入上下文的话，默认是这样调用的 zepto.qsa(document,selector) 默认将document作为上下文传入； 作为一个看美剧十句话能听懂三句的人...方法，该选择器不包含子选择器并且选择器开头是个#号，这说明人家要的是个ID：XXX的标签 如果满足这种情况，就调用getElementById并将返回结果放入一个数组，这也是为什么获得jQuery...直接返回空数组（任性~）； 但如果满足条件了，继续进行判断，选择器为不包含子选择器的（get√），并且不是通过ID选择的（get√），而且支持getElementsByClassName的（
可以选择一个或者多个标签 注意 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的) 长名称或词组可以使用中横线来为选择器命名。...用法基本和类选择器相同。 id选择器和类选择器区别 W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。...id选择器和类选择器最大的不同在于 使用次数上。 pink老师 总结他们 类选择器我们在修改样式中，用的最多。...非常多 .nav { color: red; } id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;} 通配符选择器 选择所有的标签 选择的太多，有部分不需要...2.8 团队约定 选择器 尽量少用通用选择器 * 尽量少用 ID 选择器 不使用无具体语义定义的标签选择器 div span /* 推荐 */ .jdc {} li {} p{} /* 不推荐 */
值类型 :简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string , number，boolean，undefined , null引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址...，但并未决定放什么，这时候就用null先给这个变量） 2.堆和栈堆栈空间分配区别: 1、栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等。...其操作方式类似于数据结构中的栈; 简单数据类型存放到栈里面 2、堆(操作系统) : 存储复杂类型(对象) , - 般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。...文档: 一个页面就是一个文档 , DOM中使用document表示 元素:页面中的所有标签都是元素, DOM中使用element表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM...('box'); console.log(boxs); // querySelector返回指定选择器的第一个(类选择器和id选择器都可以用哦) 类选择器(.类名)和id
我已经使用CSS多年了，但直到最近我才深入研究了一下CSS选择器。 我为什么要这样做呢？...我们都知道选择器，但麻烦的是随着时间的推移，很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情。...以上所有属性选择器实例都区分大小写。 但是我们有一个技巧， 如果我们在结束方括号之前插入一个i，我们可以不区分大小写进行匹配。 ?...(codepen链接：https://codepen.io/dgwyer/embed/qYvpMP) 工作电子邮件地址是必填项，并且要求填写正确有效；个人工作电子邮件地址不是必需的，但如若填写，需正确有效...结构选择器 结构选择器非常强大，它是基于元素在DOM中的位置进行匹配。 这类型选择器特殊的地方在于它允许通过传入参数的方式来操作。
一共有三种方式： 内嵌样式 使用 HTML 元素的全局属性 style 声明，仅影响一个元素，除非工作环境受限，比如只允许编辑 HTML 的 body，否则强烈不推荐这种方式。...基本选择器 基本选择器其实是一些比较常用、简单的选择器，包括：元素选择器、id 选择器、class 选择器、属性选择器、组合选择器。这些在第一篇前端入门1-基础概念中已经介绍过了，这里不就详细说了。...基本选择器规则很简单，选择器基本就是一两个条件，满足了即可匹配上，如 a.class，p#id 等，即使有稍微经过组合，但仍旧不复杂，但有些应用场景下需要通过复杂的规则，即需要满足多个条件下才能匹配上。...在 CSS 中也是可以使用一些内置的方法功能。 伪类选择器 当不是通过 HTML 文档中元素的一些基本性质，比如 id，class，标签名，属性这些基本特征来匹配这些元素时，就可以称作伪类选择器。...id 选择器 class 选择器，属性选择器，伪类选择器 元素选择器，伪元素选择器 以上优先级从高到低，同层级之间，如果存在冲突的样式属性的话，以文档中最后出现的属性为准，采用覆盖规则。
因为比起class而言id专用性更高(在一个页面上id是唯一的, 但很多元素可以拥有相同的class — ID 选择器在它们的目标中是非常优先的)，红色背景色和1pixel的黑色边框都应应用于第二元素，...important 我们建议你千万不要使用它，除非你绝对必须使用它。由于 !important 改变了层叠正常工作的方式，因此调试CSS问题，尤其是在大型样式表中，会变得非常困难。...如上面所示的示例所示，元素选择器具有很低的专用性。类选择器具有更高的专用性，所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器. 战胜ID选择器的唯一方法是使用 !...百位：在整个选择器中每包含一个ID选择器就在该列中加1分。 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。...然而选择器七同时击败了五和六——它有与五相同数量的子选择器在链中，但一个元素已被换为了一个类选择器。所以获胜的专用性值是33比23和24。
我提醒他：“你有没有试过使用伪类选择器？” “伪类？我通常只用类选择器。”他回答。 我解释道：“我们可以使用:focus伪类来实现这个效果。你可以先回去继续你的工作。”...3、增强样式的可维护性 使用属性选择器，开发者可以避免在HTML中过度使用类或ID，从而简化HTML结构并提高样式的可维护性。...当需要基于相同属性的元素应用统一的样式时，只需在CSS中定义一次相应的属性选择器规则，而不是在HTML中为每个元素重复添加类或ID。...组合选择器的存在和使用主要基于以下几个原因： 1. 提高选择器的精确性 在复杂的网页布局中，仅使用简单选择器（如元素选择器、类选择器或ID选择器）往往难以精确地定位到特定的元素。...优化CSS的结构 使用组合选择器，可以避免在HTML中过度使用类或ID来达到样式目的，从而使得CSS的结构更加清晰和简洁。
) 类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类 2 其中“active,important, items”就是我们以类给li加上一个类名，以便类选择器能正常工作，从而更好的将类选择器的样式与元素相关联。...4、id选择器(#ID) ID选择器和类选择器相似，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个...这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。.../css3/attribute-selectors IE6不支持属性选择器 CSS3的属性选择器主要包括以下几种： 1、E[attr]：只使用属性名，但没有确定任何属性值； .demo a[id] {background
在css3版本之前，伪类选择器和伪元素选择器都是一个冒号，css3的语法中，为了让伪类选择器和伪元素选择器有所区分，在伪元素选择器前又增加了一个冒号，编程了两个冒号。...当时css3是完全兼容此前的css版本的，所以大家在开发的过程中，可能会遇到只有一个冒号的伪元素选择器，虽然可以正常使用，但是这是过时的语法，大家在开发的过程中尽量使用css3的新语法，使用两个冒号。...虽然css还有很多很多选择器我们并没有讲解，但是目前学习的选择器基本可以应付95%以上的开发工作了，在学习的过程中，建议大家先熟悉这些选择器并灵活运用，日后的工作中如果遇到需要其他选择器才能应付的需求，...我们使用两个class选择器定义一个div，最终div的样式被第二个选择器设置，这是因为两个选择器权重如果相同，最后面的选择器设置的内容会覆盖前面的内容; 选择器权重计算方法 在css中，id选择器的权重是...嵌入样式写在html文件中，随着网页内容的增加，会显得html文件过于臃肿，所以也不推荐使用这种方式。 从现在开始，我们编写的所有样式，都要使用外部样式。
你可以使用.title选择器，它只在Card组件内工作，并使用另一个.title选择器，它只在 Accordion 中工作。...你可以阻止一个组件的选择器针对子组件中的元素，或者如果需要，也可以允许它们到达。 你不再需要BEM风格的类名。 此外，近度在级联中变成了一等公民。...是的，特异性仍然很重要，但这是好事™️。稍后再说。 此时，你可以使用普通的后代选择器来实现这一点。但当你在范围内应用内部边界或在页面上重叠多个范围时，新的、以前不可能的选项开始出现。...--> 范围的影响受到了限制，使其不针对.slot内的任何东西。这样，你可以嵌套两个范围，每个范围都可以使用相同的通用标题类名，而不会发生冲突。...如果你使用了复杂的BEM类名系统，并努力使所有的选择器特异性保持一致，想想这可以带来的自由。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
