首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

对于多个类选择器或单个:not(),CSS的性能更好?

对于多个类选择器或单个:not(),CSS的性能更好取决于具体的使用场景和浏览器的实现方式。

  1. 多个类选择器: 多个类选择器是指同时使用多个类名作为选择器,例如.class1.class2。在大多数情况下,多个类选择器的性能比单个:not()选择器更好。这是因为多个类选择器可以直接匹配元素的类名,而不需要进行额外的计算。此外,多个类选择器的优势还在于可以更精确地选择目标元素。
  2. 单个:not()选择器: 单个:not()选择器是指使用:not()函数来排除某个特定的选择器,例如:not(.class1)。在某些情况下,单个:not()选择器的性能可能比多个类选择器更好。这是因为:not()选择器可以通过直接排除某个选择器来减少匹配的元素数量。然而,在某些浏览器中,使用:not()选择器可能会导致性能下降,特别是在选择器的复杂度较高时。

综上所述,对于多个类选择器或单个:not()选择器,无法一概而论哪个性能更好。在实际使用中,应根据具体的情况进行选择,并进行性能测试和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从零开始学 Web 之 CSS3(一)CSS3概述,选择器

3、优势 减少开发成本与维护成本 在CSS3出现之前,开发人员为了实现一个圆角效果,往往需要添加额外HTML标签,使用一个多个图片来完成,而使用CSS3只需要一个标签,利用CSS3中border-radius...提高页面性能 很多CSS3技术通过提供相同视觉效果而成为图片“替代品”,换句话说,在进行Web开发时,减少多余标签嵌套以及图片使用数量,意味着用户要下载内容将会更少,页面加载也会更快。...伪选择器:以某元素相对于其父元素兄弟元素位置来获取无素结构伪。...,过渡掉其它类型元素*/ li:first-of-type{ color: red; } li:last-of-type{ color: orange; } 2.2.3、查找单个元素多个元素...(even){ background-color: blue; } li:nth-child(odd){ background-color: red; } 2.2.4、查找单个元素多个元素(有过滤

71230

如何使用CSS选择器

video元素 浏览器最近又收到了三个伪选择器… :is伪选择器 注意:这最初被指定为:matches()和:any(),但:is()已经成为CSS标准。...MDN解释::is()CSS函数将选择器列表作为参数,并选择该列表中任意一个选择器可以选择元素。这对于以更紧凑形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同样式。...:is(article, section, aside) p { color: #444; } 单个选择器可以包含任意数量:is()伪。...important; } 一个更好选择是在你CSS重置中采用:where()零优先级。...比如说,这里是为任何包含一个多个标签链接添加蓝色、两像素宽边框CSS: /* style the element */ a:has(img, section

2.2K40

NEC css规范

CSS规范 - 分类方法 SS文件分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大项目,我们需要把CSS文件进行分类。...如果这五不能满足你需求,你可以另外定义一个多个大类,但必须符合单个字母+"-"为前缀命名规则,即 .x- 格式。 特殊:.j-将被专用于JS获取节点,请勿使用.j-定义样式。...一个语义化标签也可以是后代选择器,比如:.m-list li{}。 不允许单个字母选择器出现,原因详见下面的“模块和元件后代选择器扩展”。...注:此方法用于选择器,直接使用标签做为选择器则不需要使用此命名方法。 注:为防止后代选择器扩展和大类命名规范冲突,后代选择器不允许使用单个字母。   ...清晰CSS模块 如果你做到了命名规则要求,你CSS模块也就清晰可见了。 用“注释”来说明每一个模块对于较大CSS文件来说显得尤为重要。

1.4K80

【海贼王航海日志:前端技术探索】CSS你了解多少?(一)

基础选择器单个选择器构成。 标签选择器 选择器 id选择器 通配符选择器 2. 复合选择器:把多种基础选择器综合运用起来。...开头。 下方标签使用class属性来调用。 一个可以被多个标签使用,一个标签也能使用多个(多个名要使用空格分割,这种做法可以让代码更好复用)。 如果是长名,可以使用 - 分割。...CSS中使用#开头表示id选择器。 id选择器值和html中某个元素id值相同。 html元素id不必带#。 id是唯一,不能被多个标签使用(和选择器最大区别)。 基础选择器小结 选择器 作用 特点 标签选择器 能选出所有相同标签 不能差异化选择 选择器 能选出一个多个标签 根据需求选择,最灵活,最常用 id选择器 能选出一个标签 同一个id...5.4.5 -> 复合选择器小结 选择器 作用 注意事项 后代选择器 选择后代元素 可以是孙子元素 子选择器 选择子元素 只能选亲儿子,不能选孙子 并集选择器 选择相同样式元素 更好做到代码重用 链接伪选择器

5310

一篇文章带你了解CSS 选择器

CSS选择器是一种用于匹配HTML文档中元素模式。关联样式规则将应用于与选择器模式匹配元素。 一、什么是选择器选择器CSS最重要方面之一,因为它们用于选择网页上元素,以便可以设置样式。...可以通过多种方式定义选择器。 二、通用选择器 通用选择器(用 * 星号星号表示)与页面上每个单个元素匹配。如果目标元素上存在其他条件,则可以省略通用选择器。...ID选择器 id选择器用于为单个唯一元素定义样式规则,ID选择器定义是一个井号(#),后跟ID值。...此样式规则将id属性设置为元素文本呈现为红色error。 2. class选择器 选择器可用于选择具有class属性任何HTML元素。具有该类所有元素将根据定义规则进行格式化。...子选择器由两个多个选择器组成,两个选择器之间用大于号(即>)隔开。例如,可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素第一级。

1.1K20

使用CSS提高网站性能30种方法

[Pingdom网站速度测试:https://tools.pingdom.com/ 2.快速间接改进CSS 您可以在不接触任何代码情况下进行性能改进: 迁移到更好、更快Web主机考虑使用内容交付网络...="base.css"> 或者... 10.捆绑和缩小样式表 HTTP/2可以比HTTP/1.1更好地服务于多个样式表,但是单个文件需要一个头...特别是,深度嵌套结构可能会导致过于复杂选择器,从而使样式表变得庞大。 18.简化您选择器 现代浏览器解析长选择器没有问题,但是降低复杂性将减小文件大小,提高性能,并使代码更易于维护。...24.创建针对设备样式表 包含所有设备代码单个(构建)样式表对于大多数站点都是实用。然而,如果你代码库很大,或者移动和桌面设计有很大不同,你可以创建特定于设备样式表,例如。 <!...CSS-in-JS框架通常在构建时创建随机名,因此组件样式不会冲突。 最后,使用CSS级联比使用CSS级联更好。例如,你可以设置默认字体、颜色、大小、边框等。它们是普遍应用,然后在必要时覆盖它们。

3.4K20

如何在Selenium WebDriver中查找元素?(一)

如果任何网站具有非唯一ID具有动态生成ID,则不能使用此策略唯一地查找元素,而是将返回与定位器匹配第一个Web元素。我们将如何克服这种情况,将在XPATH / CSS选择器策略中进行说明。...按类别名称查找 此方法根据CLASS属性值查找元素。更适用于查找具有针对它们定义css多个元素。 句法: driver.findElements(通过。...通过CSS选择器查找 对于生成动态ID网站(例如基于ADF应用程序)基于最新JavaScript框架(例如–无法生成任何ID名称React js)构建网站,无法使用ID /名称策略定位器来查找元素...相反,我们必须使用CSS选择器XPath选择器。 XPATHSelector XPATH使用标准XML查询语法,因此更具可读性,学习曲线也不那么陡峭。...以下是CSS选择器一些主要使用格式– 标记和 ID 标签和类别 标签和属性 标签,和属性 子字符串匹配 以(^)开头 以($)结尾 包含(*) 子元素 直子 子孩子 第n个孩子 请参阅下面的屏幕截图

6K10

前端编码规范

– 中横杠符连接,项目里面的私有样式文件:项目名-业务模块名称.css 1.2 选择器命名 [强制] 在不是必须情况下尽可能不用id选择器。...1.3换行 [强制] 一个rule中有多个选择器时,选择器必须换行。 [强制] 属性值之间必须换行。 [建议] 对于超长样式属性值,可在 空格 , 处换行。...[强制] 在会广播事件函数前使用 @fires 标识广播事件,在广播事件代码前使用 @event 标识事件。 [建议] 对于事件对象注释,使用 @param 标识,生成文档时可读性更好。...3.2 DOM 3.2.1 元素获取 [建议] 对于单个元素,尽可能使用 document.getElementById 获取,避免使用document.all。...[建议] 对于多个元素集合,尽可能使用 context.getElementsByTagName 获取。其中 context 可以为 document 其他元素。

1.5K20

面试题整理|45个CSS面试题

2、多个HTML元素可以包含许多文档,可以在其中创建。 3、要在复杂情况下对样式进行分组,请使用选择器和分组方法。 Q7、使用CSS缺点?...1、无法通过选择器升序 2、垂直控制局限性 3、没有表情 4、没有列声明 5、伪不受动态行为控制 6、规则,样式,无法定位特定文本 Q8、列举一些CSS框架?...选择器以标志符(句点)开头。 Q10、什么是RGB?...,因此在移动设备上性能更高 2、它会强制针对响应式CSS规则编写更简洁代码。...对于大型项目(具有多种布局和内容类型站点,或在同一设计框架下具有多个品牌站点),使用模块化方法并将CSS拆分为多个文件更为明智。 跨文件拆分CSS可以更轻松地将任务打包给团队。

4.1K30

CSS基础

默认 是根据css选择器权重,按权重进行叠加,权重值大css 覆盖 权重小css。 基本规则 选择器{ 属性:值; 属性:值; } * 选择器作用:用来匹配html元素。...* 多个选择器之间可以叠加 * 分类和权重 * 解析方式和性能 浏览器 解析选择器 顺序,是按照 从右向左。找到右边第一个选择器后,逐步向左边 进行选择器验证。...这样选择器-解析顺序,是处于性能考虑。先找到最内部 选择器,然后逐级向外 进行验证 外部选择器。比 从外向内查找 要进行步骤少。...从右向左解析css选择器,这样做目的是:为了加快 浏览器对css选择器解析速度。...实际上 选择器权重 是不能进位,一个id选择器权重 是大于 11个选择器。如下图所示: ? 选择器权重 - 参考表 '+'选择器则表示某元素后相邻兄弟元素,也就是紧挨着,是单个

43420

可能是最全最易记CSS选择器分类大法

前言 最近查看了几位同事代码,发现很多CSS书写习惯都是清一色名而没有相应选择器,层层嵌套标签都包含至少一个名。...是的,「选择器」和「名」对比起来性能上确实没有后者那么好,但是如今浏览器对于CSS解析速度已得到大大提升,完全可忽略「选择器」那丁点性能问题。...有兴趣同学可自行百度搜索CSS选择器性能相关问题进行学习。多一个技巧多一份保障! 本文不细说「选择器性能问题,先来对选择器做一个功能性分类。...选择器劣势就不多说了,使用不当可能会引起解析性能问题,这个对于现代浏览器来说几乎可忽略,除非你还是IE忠实粉丝。使用选择器有什么好处呢,我给大家总结一下。...对于那些结构与行为分离写法,使用Sass/Less书写属性时结构会更加清晰易读 减少很多无用或者少用名,保持css文件整洁性和观赏性,代码也是一门艺术 减少修改名而有可能导致样式失效问题,有时修改名没有确保

80140

前端基础:CSS

Syntax CSS 语法规则由两个主要部分构成:选择器,以及一条多条声明 选择器 { 属性:值; 属性:值 } -- 在大括号中可以有多个声明,声明是由属性与值组成,它们之间使用 : 分开,而多个声明之间...对于数组,可以使用具体数值,也可以使用百分比,它默认单位是 px。CSS 也可以使用其它单位 mm,cm 等。 如果属性值是由多个单词组成,那么需要加上引号。...样式可以规定在单个 HTML 元素中,在 HTML 页头元素中,或在一个外部 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。...选择器分组 让多个选择器可以同时使用同样一段 css,注意选择器之间使用逗号分开。...CSS CSS可对 CSS 选择器添加一些特殊效果 锚伪: 在支持 CSS 浏览器中,链接不同状态都可以不同方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态

2.5K20

【Java 进阶篇】CSS语法格式详解

本文将深入解释CSS语法格式,包括选择器、属性和值等基本概念,同时提供示例代码以帮助初学者更好地理解。 1....CSS语法结构 CSS基本语法结构如下: 选择器 { 属性1: 值1; 属性2: 值2; /* 更多属性和值 */ } 选择器选择器用于选择一个多个HTML元素,以确定哪些元素应用这些样式规则...h1 { /* 样式规则 */ } 4.2 选择器 选择器以点.开头,选择HTML元素中包含指定元素。例如,.btn选择所有名为"btn"元素。.../* 这是一个CSS注释 */ h1 { color: blue; /* 这是另一个注释 */ } 注释对于添加代码说明临时禁用样式非常有用。 7....希望这篇文章对你有所帮助,让你更好地理解CSS语法。

22210

CSS 样式书写规范

选择器 当一个规则包含多个选择器时,每个选择器独占一行。 、+、~、> 选择器两边各保留一个空格。....g-header > .g-header-des, .g-content ~ .g-footer { } 命名短且语义化良好 对于选择器命名,尽量简洁且具有语义化,不应该出现 g-abc ...当一个属性有多个属性值时,以逗号 , 分隔属性值,每个逗号后添加一个空格,当单个属性值过长时,每个属性值独占一行。...当该业务项目主要由固定一个多个人负责时,需要添加@author标识,一方面是尊重劳动成果,另一方面方便在需要时快速定位责任人。... .g-content .g-content-list .item { } ,避免使用通用标签名作为选择器一环可以提高 CSS 匹配性能

1.2K70

前端秘法基础式(CSS)(第一卷)

通过这种方式,可以 方便地为整个网站特定页面应用一致样式。 CSS 还支持各种选择器,如选择器、ID 选择器、元素选择器等,以便更精确地定位和样式化特 定 HTML 元素。...同时,CSS 还提供了一些高级特性,如媒体查询,可以根据不同设备屏幕 尺寸应用不同样式。 <!...1.基础选择器(单个选择器构成) 标签选择器 选择器 id选择器 通配符选择器 1.1选择器 通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中...) 后代选择器选择器 并集选择器选择器 2.1后代选择器 又叫包含选择器,选择某个父元素中某个子元素 父级元素 子级元素{         ..... } 只影响被选择子级元素... ol li{ color: blue; } 2.2伪选择器 链接伪选择器 a:link选择未被访问过链接

9010

CSS笔记(1)

语法规范 CSS规则由两个主要部分组成:选择器以及一条多条声明....选择器分为基础选择器和复合选择器两大类: 基础选择器是由单个选择器组成 基础选择器又包括:标签选择器,选择器,id选择器和通配符选择器....语法 结构需要用class属性来调用class意思 变红色 口诀 样式点(.)定义,结构(class)调用.一个多个,开发最常用...选择器-多名 我们可以给一个标签指定多个名,从而达到更多选择目的,这些名都可以选出这个标签,简单理解就是一个标签有多个名字....id选择器选择器区别 1.选择器好比人名字,一个人可以有多个名字,同时一个名字也可以被多个人使用. 2.id选择器好比人身份证号码,全中国唯一,不得重复 3.id选择器选择器最大不同在于使用次数上

34220

高质量jQuery代码十二条经验

因为ID选择器和元素选择器是原生JavaScript操作,而选择器不是,大家顺便可以看下find context 区别,find() children区别。...尽可能具体化选择器——ID要比tag更好。 避免不必要冗余。...到目前为止,无论使用哪一种浏览器,使用ID选择器和当个选择器都是选中元素最快方式。 2.2、避免多个ID选择符 Id选择符应该是唯一,所以没有必要添加额外选择符。...7.1、繁重操作中分离元素 如果你打算对DOM元素做大量操作(连续设置多个属性css样式),建议首先分离元素然后在添加。...或许javascript微型框架jQuery定制版是更好选择。 虽然都是陈词滥调,但是我发现还不能很好得做到上述所有,记录下来希望自己能够全部做到。

1.2K40

30道CSS 面试知识点总结

所有代码都放在一个页面上,这意味着对代码行进行改进编辑不需要重复修改多个页面. *网站速度 *– 通常,一个网站使用代码最多可以达到 2 页更多。但是对于CSS,这不是问题。...CSS 中有四可以授权选择器特异性级别: 内联样式 ID ,属性和伪 元素和伪元素 问题12:CSS有什么缺点 CSS缺点有: 版本太多 – 与HTMLJavascript等其他参数相比,CSS...问题 20:如何在CSS中定义一个伪?它们是用来干什么 CSS是用来添加一些选择器特殊效果。...选择器性能: (1)关键选择器(key selector)。选择器最后面的部分为关键选择器(即用来匹配目标元素部分)。CSS选择符是从右到 左进行匹配。...(5)尽量少去使用后代选择器,降低选择器权重值。后代选择器开销是最高,尽量将选择器深度降到最低,最高不要超过 三层,更多使用来关联每一个标签元素。

1.4K20

CSSCSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★

用户注册信息 内嵌样式 : CSS 样式代码 写在 HTML 文档 标签中 标签中 ; 适用场景 : 内嵌样式 引入 CSS 样式 适合 单个网页 样式定义...; 缺陷 : 如果一个 网站包含多个页面 , 每个页面都使用内部样式表会导致代码重复和维护困难 ; 标签选择器 {....css 文件中 , 然后在 HTML 文档中使用 标签 @import 规则引入 ; 优点 : 提高了代码 可重用性 , 可维护性 , 网站性能 ; <..." 识别标签 ; 首先 , 在标签中 class 属性中设置名 , 标签内容 ; 然后 , 在 CSS 中使用 " .名 " 作为 选择器 , 选出设置指定标签...1:属性值1; } 链接伪选择器 链接伪选择器 可以 设置 链接文本 不同状态样式 : 未访问链接样式 : 默认样式 , 界面打开后 , 默认显示该样式 ; a:link { 属性名称:属性值

13310

分享15个有用,你可能还不知道CSS小技巧,建议每个前端开发者都了解下

今天,我们将探索一些不太为人所知CSS属性,这样你就可以在不牺牲性能前提下为你应用增添细节,提升前端技能到一个新水平。...1、使用:not()伪简化你CSS :not()伪允许你将样式应用于所有不匹配指定选择器元素。这是简化你CSS并避免手动列出元素应用来排除某些元素好方法。...通过使用calc()函数,你可以在CSS中进行动态计算,将不同单位值进行相加、相减、相乘相除。这对于创建响应式设计非常有用,因为你可以根据不同视口尺寸元素大小自动调整样式。...这对于设置全局样式非常有用,例如设置默认字体、颜色行高等。 需要注意是,选择器会匹配页面上每个元素,包括嵌套元素。因此,在使用选择器时,你需要小心确保样式不会无意间影响到你不想改变元素。...这在创建主题需要同时更改多个值时特别有帮助。 通过使用CSS变量,你可以在整个样式表中定义和使用变量,将值存储为变量后,可以在需要地方重用这些值。

18040
领券